[Resolved] Customize sticky menu in page headers

Home Forums Support [Resolved] Customize sticky menu in page headers

Home Forums Support Customize sticky menu in page headers

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #700199
    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
    #700207
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #700460
    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.

    #700795
    Leo
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #701151
    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.

    #701477
    Leo
    Staff
    Customer Support

    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;
        }
    }
    #702145
    Federico

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

    #702412
    Leo
    Staff
    Customer Support
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.