- This topic has 17 replies, 5 voices, and was last updated 3 years, 9 months ago by
Leo.
-
AuthorPosts
-
February 27, 2016 at 8:55 am #175697
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?
February 27, 2016 at 10:09 am #175723Tom
Lead DeveloperLead DeveloperYou 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-developmentFebruary 27, 2016 at 11:11 am #175735Jasper
thanks, but i do not see any difference when the menu becomes sticky
February 27, 2016 at 12:34 pm #175752Tom
Lead DeveloperLead DeveloperCan 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-developmentFebruary 27, 2016 at 12:36 pm #175753Jasper
February 27, 2016 at 11:15 pm #175830Tom
Lead DeveloperLead DeveloperAh, 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-developmentFebruary 28, 2016 at 12:21 am #175841Jasper
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, JasperFebruary 28, 2016 at 10:55 am #175920Tom
Lead DeveloperLead DeveloperAh, 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-developmentFebruary 28, 2016 at 11:07 am #175923Jasper
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
February 28, 2016 at 11:22 am #175935Jasper
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.
February 28, 2016 at 11:25 am #175938Tom
Lead DeveloperLead DeveloperI 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-developmentFebruary 28, 2016 at 11:28 am #175940Jasper
perfect!
May 13, 2016 at 10:35 am #194075Á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.
May 13, 2016 at 1:04 pm #194098Tom
Lead DeveloperLead DeveloperHi 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-developmentJune 8, 2017 at 8:36 am #330523Jean-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;
} -
This reply was modified 5 years ago by
-
AuthorPosts
- You must be logged in to reply to this topic.