[Resolved] Sticky menu

[Escobar]

I have customized the menu using the following instructions:

https://docs.generatepress.com/article/centering-logo-navigation/

All perfect, but I want to know if it would be possible for it to match the sticky menu when scrolling down.

Thanks in advance.

Site is: Vestuario Laboral

[Leo]

Hi there,

The link to your site isn’t working for me.

Can you double check?

Let me know 🙂

[Escobar]

I am sorry. This is the website:
Vestuario Laboral

[David]

Can you remove the Centering Logo CSS from the site.
Then go to Customizer > Layout > Header and enable the Navigation as Header option.
Once enabled let me know and ill provide some CSS to style both the static and sticky nav.

[Escobar]

Done and ready!
What to do?

Thanks.

[David]

Try this CSS:

@media(min-width: 769px) {
    .navigation-branding {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    .main-navigation:not(.slideout-navigation) .main-nav {
        flex: 1;
    }
    .main-navigation:not(.slideout-navigation) .main-nav > ul {
        display: flex;
    }
    .main-navigation:not(.slideout-navigation) .main-nav > ul > li:nth-child(4) {
        margin-left: auto;
    }
}

In the CSS you will see this: nth-child(4)

The 4 decides which Menu items sit to the right. Change this number to where you want the spacing to appear.

[Escobar]

You are a genius!!!

Thanks a lot!

Excellent.

[David]

Glad to be of help.

[Author]

Posts