Hi,
I have made som CSS changes to this site, including adding more padding to the logo, and border bootom to the menu. This works nicely.
header#masthead.masthead-logo-in-menu .logo {padding: 22px 0;}
.site-header {border-top-color: #92A5DC; border-top-width: 5px; border-top-style: solid;}
.main-navigation ul li a {padding-right: 35px;padding-left: 35px;padding-top: 33px !important;padding-bottom: 22px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;}
.main-navigation ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}
Is it possible to have a different logo padding when the menu is sticky?
Say for instance, normal menu padding top/bottom 22px and then sticky menu padding top/bottom 12px?
If it is, then I also need to change the main navigation padding-bottom on the sticky menu, is that possible to?
Hi Hans
Not quite sure I’m with you there. Once the sticky menu is in effect you can’t see the logo. You can target the sticky menu as follows:
.main-navigation.sticky { }That class will only apply to the sticky menu which is the menu that comes into effect once you scroll past the regular menu.
Hi Andrew,
Please visit URL, this is a different design, than the previous ones that I have asked about :-)
The logo IS in the sticky menu!
http://wptest01.zkagen-marketing.dk/
Try the following:
/* Vantage logo in menu padding */ header#masthead.masthead-logo-in-menu .logo { padding: 0 0 0 0; }Change 0 0 0 0 to the px values you want for top, right, bottom, left.
OR
to adjust the padding for the bar take a look at the menu padding setting at Appearance > Customize > Menu.
Hi Andrew,
Thanks for the feedback. However I can see that I have not been able to describe what I am trying to achieve here.
The design that this question revolves around, is: Logo in menu.
I have already found the solution to change logo padding. I have already added extra paddin top/bottom to the logo in the attached URL example.
This looks nice, but the problem is, that the header now stays this bigger size, even on the sticky header.
What I am trying here, is to have one set of logo padding top/bottom on the normal header, and another set of logo padding top/bottom in the sticky menu, so that the sticky header “shrinks” compared to the normal header.
savvy? :-)
So that’s where .sticky comes in. If you inspect the source you’ll see the sticky menu get’s added on the fly and has a class of sticky that the the original menu doesn’t have. So you need to target using that.
/* Vantage logo in menu padding */ header#masthead.masthead-logo-in-menu .site-navigation .logo { padding: 0 0 0 0; }And now for sticky:
/* Vantage logo in menu padding */ header#masthead.masthead-logo-in-menu .site-navigation.sticky .logo { padding: 0 0 0 0; }That’s it!, thanks.
However, since I also have made changes to the main-navigation, I need to change this also in the sticky header.
This is the what I have done to the main-navigation normal header:
/* Menu Padding Horizontal */ .main-navigation ul li a {padding-right: 35px;padding-left: 35px;padding-top: 33px !important;padding-bottom: 22px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;} .main-navigation ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}Can you help with the correct selectors for the sticky header with these settings:
/* Menu Padding Horizontal */ .main-navigation ul li a {padding-right: 35px;padding-left: 35px;padding-top: 23px !important;padding-bottom: 12px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;} .main-navigation ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}With your help Andrew, I am on a fast track to Vantage Mastery here, it is highly appreciated!
HC
I found the solution it my self!
So simple, when I pay attention to what you are saying, thanks.
/* Menu Padding Horizontal */ .main-navigation.sticky ul li a {padding-right: 35px;padding-left: 35px;padding-top: 23px !important;padding-bottom: 12px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;} .main-navigation.sticky ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}No problem.
Try this:
/* Menu Padding Horizontal */ .main-navigation.sticky ul li a {padding-right: 35px;padding-left: 35px;padding-top: 23px !important;padding-bottom: 12px !important;border-bottom-color: #f7f7f9; border-bottom-width: 5px; border-bottom-style: solid;} .main-navigation.sticky ul li a:hover {border-bottom-color: #92A5DC; border-bottom-width: 5px; border-bottom-style: solid;}LOL, I was faster than you where :-)
Super, glad you’re getting there.
@Hans Christian
How did you manage that the sticky menu doesn’t overlap the main menu ? When I start scrolling, the sticky menu gets activated. –> So when i scroll back to the top this results in a overlapping sticky menu over the main menu :( (I have a different color for the sticky menu)
thanks in advance
@thabasti
Not sure what you mean. Do you have an URL I can look at?
Unfortunately I don’t have an URL, because the site is not yet online .
I have the “”logo in menu Option. When I scroll, the Sticky Nav gets activated and shrinks the navigation bar ( exactly like on your website). So far so good. But if I scroll to the top of the page again, the navigation bar stays the same. It won’t get back to the normal size.
I hope you understand me now. Really appreciate any help on that.
Okay get what you are saying.
The function you se on my website is the standard function, I don’t know way that does not happen on your site.
Sorry.
Finally!!!!
Now i figured out how to show the top navigation, when you scroll to the top of the page again.
Turned out, that the .site-header border-top enables a “glitch” :D
@Hans Christian: Unfortunately I missed that piece of css code in your post. I should have better looked more into it.
.site-header { border-top-color: #ffffff; border-top-style: solid; }