Archived topic
change height primary menu when sticky
17 replies · Started by Jasper on February 27, 2016
In the customizer, in the element spacing section, i can set the height of the primary menu. Is there css i can use to set a different height for when the menu becomes sticky?
You need to add CSS for that:
.main-navigation.navigation-clone .main-nav ul li a {
line-height: 60px;
}
thanks, but i do not see any difference when the menu becomes sticky
Can you link me to the site?
Ah, you're not using a transition:
.main-navigation.is_stuck .main-nav ul li a {
line-height: 60px;
}
that works but it has not yet the desired effect
I managed to get the logo on the stickymenu smaller with:
.main-navigation.is_stuck .header-image {
height: 50px;
}
But there is still too much white space below the menu and i can't get rid of it.
Using the height setting in the element spacing setting it keeps the menu centered vertically and sizes the logo automatically to fit the available space. I was hoping to be able to set a different height for the sticky menu and that the automatic resizing of the logo and vertical centering of the menu would remain intact.
Regards, Jasper
Ah, this should be your full code:
.main-navigation.is_stuck .main-nav > ul > li > a {
line-height: 60px;
}
.main-navigation.is_stuck ul ul {
top: 60px;
}
.main-navigation .sticky-logo,
.main-navigation .sticky-logo img {
height: 60px;
}
Thanks, great!
I changed the last part in
.main-navigation.is_stuck .sticky-logo,
.main-navigation.is_stuck .sticky-logo img {
height: 60px;
}
Now the logo is big when menu is not sticky and changes to small when menu becomes sticky
One other thing i notice is that when the menu becomes sticky, the submenu opens in the same spot as when the menu is not sticky. It would be nice if i could get it a bit 'higher' so it connects to the 'sticky' menu bar.
I noticed a couple bugs so I adjusted the CSS above: https://generatepress.com/forums/topic/change-height-primary-menu-when-sticky/#post-175920
perfect!
Hi Tom!
I'm trying to change primary menu Height when it becomes sticky using CSS you posted before, but it doesn't work for me.
In addition, I'm trying to make menu logo disapear when it becomes sticky too. Simply I can't find the right CSS for this.
Can you help me, please?
PD: Congratulations for your great theme!
Hi there,
Any chance you can link me to your site with the CSS added?
Hello Tom
Can you please tell me where to add this code in gp-premium -
.main-navigation.is_stuck .main-nav > ul > li > a {
line-height: 60px;
}
.main-navigation.is_stuck ul ul {
top: 60px;
}
.main-navigation .sticky-logo,
.main-navigation .sticky-logo img {
height: 60px;
}