[Resolved] I can’t adjust sticky logo or sticky menu position (desktop and mobile)

[Hernan]

Hi, I’m having trouble adjusting the position of sticky elements in the header. I need to reach the following goals

On desktop (sticky)
I need to move the logo a bit more to the left, I need to move the menu a lot more to the right (almost touching the right edge)

On mobile
I need to center the logo

I have reviewed official documentation but it does not appear to apply to sticky elements

Thank you very much !

Cheers

[Ying]

For desktop, feel free to adjust the padding-left and padding-right.

@media (min-width: 769px) {
main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
    padding-left: 20px;
    padding-right: 10px;
    justify-content: space-between;
    max-width: 100%;
}
}

For mobile, add this CSS:

.site-logo.mobile-header-logo {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
}
#mobile-header .inside-navigation {
    justify-content: flex-end;
}

[Hernan]

thank you very very much

to adjust the logo on desktop sticky I used this code:

#sticky-navigation .navigation-branding {
         position: absolute;
         left: 25%;
         transform: translateX(-50%);
         z-index: 1000;
     }

To adjust the main menu in sticky desktop I used the provided code, the only detail is that the first point of the class was missing, the code that I am finally using is something similar to this:

.main-navigation.navigation-stick.has-sticky-branding .inside-navigation.grid-container {
     padding-left: 76%;
     padding-right: 10px;
     justify-content: space-between;
     max-width: 100%;
}

Sticky menu on mobile centered in the middle without problems with the offered code

Thanks a lot !

[Ying]

You are welcome 🙂

[Hernan]

I have a very basic doubt about this but I can’t find the CSS selector

It’s a bit backwards from the original question, now I need the selector for the menu NOT stikcy

It turns out that I am adjusting the size and padding of the logo (which has absolute position) and to re-align with the menu I would need to apply a little padding to the menu

If I apply the menu’s CSS selector it affects the sticky menu as well (I don’t want that, the sticky menu is aligned correctly)

I’m embarrassed, I apologize if it’s too basic

[Ying]

Are we still trying to achieve this?
https://generatepress.com/forums/topic/i-cant-adjust-sticky-logo-or-sticky-menu-position-desktop-and-mobile/#post-2315970

Have you tried using my CSS?

[Hernan]

I could express myself much better, sorry for that. The thing is that I tried to add padding to the logo by force by CSS which misaligned with the menu (I enlarged the logo image, so the padding was too little visible)

BUT it turns out that the theme customizer DOES WORK(I was able to add the padding and everything is still centered). Sorry I should have tried that first, as I’m working with the logo in absolute position I thought it wouldn’t work . In case someone arrives looking for related information here is the correct way to center a logo, if it is centered in this way the theme customizer should continue to work

Thanks for the consideration, I will try more on my own before opening or reopening a topic

[Ying]

No worries, glad you found that article 🙂

[Author]

Posts