[Resolved] Customize sticky menu in page headers

[Federico]

Hi everyone!

I hope someone can help me. How can I customize sticky menu in page headers? I would like to create differently colored sticky menus for different pages. Is it possible? How can I do it?

thanks a lot in advance for your help.

bye!

GP Premium 1.7.2

[Leo]

Hi there,

You will have to use CSS for this with the page ID like this:

.page-id-xx .main-navigation.navigation-stick {
    background-color: #ffffff;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

I should also mention that Page Header module has been replaced with our newest add-on Header Element/Page Hero so it’s definitely a good idea to migrate them over.

See more info here:
https://docs.generatepress.com/article/header-element-overview/
https://docs.generatepress.com/article/moving-hooks-page-headers-to-elements/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Federico]

Hi,

Thanks Leo, I resolved adopting the solution you suggested.

But I have one more question… I noticed that menu navigation colors created in different page headers don’t appear in mobile version of the site. It always appears the default primary navigation customization. How can I create differently colored sticky menus for different pages with page headers ALSO ON MOBILE?

Thank you again for your help.

[Leo]

Not quite sure what you mean?

The CSS I provided should only change on sticky navigation which you aren’t using on mobile.

The current mobile header color is from Customizer > colors > Primary Navigation.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Federico]

I apologize for my english, Leo.

I meant that different colors of different page headers’ menu navigation are not visible on mobile, but only on desktop.

Examples:

menu navigation of page header 1 is red on desktop, but is black on mobile (instead I wish it was red)

menu navigation of page header 2 is green on desktop, but is black on mobile (instead I wish it was green)

menu navigation of page header 3 is yellow on desktop, but is black on mobile….and so on.

If I set the current mobile header color from Customizer > colors > Primary Navigation as you suggested, it’ll change in all page headers, while I want different colors for different page headers.

I hope I have explained well.

Thanks a lot again.

[Leo]

To change the navigation color on mobile for individual page, try CSS like this:

@media (max-width: 768px) {
    .page-id-xx .main-navigation {
        backgrounc-color: #000;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Federico]

Now all is ok! Thanks a lot Leo for your support.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts