[Resolved] sticky menu alignment

[dasigna]

hi again,

i am facing something that i couldnt solve up to now…
short explanation:
having main menu below header (logo), menu centered.
now, when scrolling up and the sticky header fading in, i would have two things happen for the main menu in sticky header: first it should align to the right (at the moment it centeres in the remaing space on the right side of the logo), second i would have the padding reduced for the menu items (only in sticky state!).

pity me, but fiddling around for quite some time already and dont seem to be able to find the matching selectors… any clue anyone? … even possible so far?

thanks for some light in the dark in advance 🙂

[Tom]

Hi there,

The menu should keep whatever alignment it has set when it sticks, that shouldn’t change.

Are you saying you want the menu items to align right only when sticky?

As for the height when sticky, this CSS should help:

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

.main-navigation .sticky-logo, 
.main-navigation .sticky-logo img {
    height: 20px;
}

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

[dasigna]

Are you saying you want the menu items to align right only when sticky?

yep. 🙂

that seems to do the trick:

.navigation-stick {
    text-align: right !important;
	}

… found no issues yet. (???)
but cant get padding decreased only for that purpose till now …

sticky height is no issue – but thanks.

[dasigna]

crazy – found something 🙂

.navigation-stick.main-navigation.navigation-clone .main-nav ul li a {
    padding-left: 10px;
	padding-right: 10px;
	}

… that reduces the space, that the nav-items occupy.
(only thing is that this way the right edge of the sticky-menue is a bit outside the content with bigger padding)

do you see any issues with that?

[Tom]

No issues with that at all 🙂

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

[dasigna]

thx 🙂

[Tom]

No problem 🙂

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

[Author]

Posts