change height primary menu when sticky

[Jasper]

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?

[Tom]

You need to add CSS for that:

.main-navigation.navigation-clone .main-nav ul li a {
    line-height: 60px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jasper]

thanks, but i do not see any difference when the menu becomes sticky

[Tom]

Can you link me to the site?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jasper]

http://optiek.sierink-wp.nl

[Tom]

Ah, you’re not using a transition:

.main-navigation.is_stuck .main-nav ul li a {
    line-height: 60px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jasper]

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

[Tom]

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;
}

• This reply was modified 5 years ago by Tom.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jasper]

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

[Jasper]

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.

[Tom]

I noticed a couple bugs so I adjusted the CSS above: https://generatepress.com/forums/topic/change-height-primary-menu-when-sticky/#post-175920

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jasper]

perfect!

[Ángel Luis Piquero]

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!

• This reply was modified 4 years, 9 months ago by Ángel Luis Piquero.

[Tom]

Hi there,

Any chance you can link me to your site with the CSS added?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jean-Claude]

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;
}

[Author]

Posts