Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
I want my menu items to be in the middle of the nav bar. It works for the logo and the search icon, but not for the items.
When I open the page, everything is even. But when I scroll down, the menu items are too low (picture 2).
When I refresh the page in this position, everything is suddenly even again (picture 3).
But when I scroll on the top of the page, then everything is uneven (picture 4).
How can I fix this? It happened after setting the size for my logo while in sticky menu to a smaller size than usual. I have not enabled constrain logo height. The menu items vertical padding is 15px. I tried line-height: 100%;, but it didn’t work.
Hi Mrright123321,
Do you have a public URL where we can take a look at what’s going on?
Hi there,
http://www.dqsurgical.de
I changed it back to the original state. What I’m trying to achieve is making the sticky header appear thinner (including a smaller logo) once you start scrolling down.
Hi Mrright123321,
Would it be possible for you to revert to this state so I can view the resulting markup?
I changed it back to the previous state now. Check out http://www.dqsurgical.de/impressum
I added:
header#masthead.masthead-logo-in-menu .site-navigation.sticky .logo {
max-height: 50px;
max-width: 50px;
}
Hi Mrright123321,
Okay so the issue is that you’re applying the CSS solely to the sticked navigation and not the normal navigation. Please change your CSS to:
header#masthead.masthead-logo-in-menu .site-navigation .logo { max-height: 50px; max-width: 50px; }How does that look?
I get your point, but I want the logo to change dimensions when scrolling down. And I want the whole thing to be bigger when not scrolling down.
Just like here, for example: http://www.kriesi.at/themes/enfold/
Hi Mrright123321,
Hm, that’s tricky as we you would typically use JavaScript to do that (for example, that theme does).
Try the following CSS:
.site-navigation .logo img { transition: all .4s ease-in-out; width: 70px !important; height: 70px !important; max-height: none !important; max-width: none !important;}.site-navigation.sticky .logo img { width: 50px !important; height: 50px !important;}You’ll need to adjust the desired dimensions. This is about the most you can do with CSS (which sadly is all I can assist you with) so you may need to look for a different solution (such as a plugin) if this isn’t ideal.
The menu items are still not in line with the search icon. I don’t really want a transition, I just want all the items to be in the vertical center of the sticky header (just like the search icon).
http://i.imgur.com/DirTM1k.png
Hi Mrright123321,
Ah, sorry, forgot to provide CSS to override the theme default margin-top.
Please add the following CSS to WP AdminAppearanceCustom CSS:
.main-navigation ul li { transition: all .4s ease-in-out; } .main-navigation.sticky ul li { margin-top: 16px !important; }Works flawless! Thank you very much!