- This topic has 17 replies, 5 voices, and was last updated 6 years, 10 months ago by Leo.
-
AuthorPosts
-
February 27, 2016 at 8:55 am #175697Jasper
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 #175723TomLead DeveloperLead DeveloperYou need to add CSS for that:
.main-navigation.navigation-clone .main-nav ul li a { line-height: 60px; }
February 27, 2016 at 11:11 am #175735Jasperthanks, but i do not see any difference when the menu becomes sticky
February 27, 2016 at 12:34 pm #175752TomLead DeveloperLead DeveloperCan you link me to the site?
February 27, 2016 at 12:36 pm #175753JasperFebruary 27, 2016 at 11:15 pm #175830TomLead DeveloperLead DeveloperAh, you’re not using a transition:
.main-navigation.is_stuck .main-nav ul li a { line-height: 60px; }
February 28, 2016 at 12:21 am #175841Jasperthat 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 #175920TomLead 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 8 years, 1 month ago by Tom.
February 28, 2016 at 11:07 am #175923JasperThanks, 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 #175935JasperOne 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 #175938TomLead 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
February 28, 2016 at 11:28 am #175940Jasperperfect!
May 13, 2016 at 10:35 am #194075Ángel Luis PiqueroHi 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 7 years, 11 months ago by Ángel Luis Piquero.
May 13, 2016 at 1:04 pm #194098TomLead DeveloperLead DeveloperHi there,
Any chance you can link me to your site with the CSS added?
June 8, 2017 at 8:36 am #330523Jean-ClaudeHello 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;
} -
AuthorPosts
- You must be logged in to reply to this topic.