Looking to reduce Header Space in Snaps theme
-
I’m using the Snaps theme. I would like to make the space of the top page header 40% of the size (top to bottom header space) that it currently is. Can somebody please help me do this?
The blog I need help with is: (visible only to logged in users)
-
Hello there!
Dropping this code in your custom CSS area should do the trick:
.site-text-contain { height: 200px !important; }Let me know if that doesn’t work!
Sage -
Thanks a lot Sagebrownell! It did reduce the size from top to bottom, but I can’t succeed at making the logo fit in the top header. Can you please help me with that?
-
Of course!
Did you just want the logo to be bigger to fit into that space? If so, this should help:
.site-logo-link img { height: auto; max-height: 200px !important; max-width: 100% !important; width: auto; }If not, mind letting me know exactly how you would like the header to look?
Thanks,
Sage -
Hi Sage, thanks for your help!
It doesn’t really work as you can see, but it could work if we can change the background color behind the logo. It is now gray, but maybe we can change the color?
-
Hey there,
I’m not seeing the code show up even to be overwritten? If you’d like to place that back I can tinker with it further.
Either way this should help with the background:
#masthead { background-color: #fff; }Let me know if that doesn’t work,
Sage -
Hi Sage,
The background color is now white, which helps, but the logo became smaller somehow. Can I or you make it a bit bigger, without enlarging the whole header space?
-
Hey there,
Let me know if this code works (and if it doesn’t work, mind leaving it in until I check it?)
#masthead .site-logo-link img { max-height: 200px !important; max-width: 100% !important; }Thanks,
Sage -
-
-
Can I ask your help with the following:
I’d like to change the color of the top menu bar. Right now that is white, but I’d like it to be that darker blue that you colleague suggested before.
I believe that’s: #2778ac
-
Yeah, no problem!
This will change the colour of the bar:
.main-navigation { background: #2778ac !important; }When it is changed to the blue the text gets a little hard to read. Here’s the code to make the text white (or feel free to replace with a different colour if you prefer):
.main-navigation a { color: #FFFFFF !important; }Let me know if either of those don’t appear to do anything,
Sage -
That’s just perfect, thank you!
Can you help me make the font size of the top menu a little larger?
-
That’s great!
Adding an extra line to the CSS will do the trick, so the last code I gave you will become:
.main-navigation a { color: #FFF !important; font-size: 18px !important; }Then just feel free to change the 18px amount to match the size you’d like the font to be.
Hope that helps,
Sage -
That works, thanks again Sage!
The drop-down menu of the top menu bar is red. I’d like to change that into light grey. Is that possible?
-
No worries and sure is!
Changing the hover colours of the top level menu items:
.main-navigation a:hover, .main-navigation a:focus { background: #c7c7c7 !important; color: #000000 !important; }Dropdowns:
.main-navigation .sub-menu { background-color: #c7c7c7 !important; } /*text colour */ .main-navigation .sub-menu a { color: #000000 !important; }Let me know if you’d like the dropdowns hover over colour to be different from the top level menu items. I included the “color” which changes the text colour in case you don’t want it white against grey (and feel free to experiment with the different colour values to get the right one)
Hope that helps,
Sage -
That works, thanks a lot Sage!
Another question if I may; there’s a lot of space above and below the company address at the bottom of the page. Can we reduce the space above and below the address?
-
Great to hear it works!
Is something like this what you had in mind?
#secondary .widget { margin: 0 auto 0 !important; } #primary { padding: 0 3% 1em !important; }Let me know,
Sage -
That works, thanks again! :)
Another question: can we create a different background color behind the company address at the end of each page, so that it separates itself from the rest of the page. Maybe the same grey of the drop-down menu of the top menu bar would be a good color to choose? Just to be clear: I don’t mean a different color ony under the address itself, but across the page from left to right?
I hope you understand my explanation :)
-
Yup, can do!
#secondary { background-color: #c7c7c7 !important; max-width: 100% !important; padding: 20px 0 !important; }That what you were thinking?
Sage
- The topic ‘Looking to reduce Header Space in Snaps theme’ is closed to new replies.
WordPress.com Forums 