[Support request] Header custimization

Home Forums Support [Support request] Header custimization

Home Forums Support Header custimization

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1654133
    iou

    Hello,

    I am seeking help in editing the header for the Dev demo. I have done an import of the demo on my site.

    – I am looking to add buttons to the menu (have one of the links in navigation look like a button) like you all have in your stream demo.

    – I am also looking to create a second header that pops up on when a user begins to scroll (like in the Access demo).

    How can I achieve these things with Generatepress? Any help is greatly appreciated! I have generatepress premium.

    #1654334
    David
    Staff
    Customer Support

    Hi there,

    1. This article explains how to make a menu item look like a button:

    https://docs.generatepress.com/article/adding-buttons-navigation/

    2. You can enable the Sticky Navigation:

    https://docs.generatepress.com/article/sticky-navigation/

    #1655170
    iou

    Thank you for the quick response.

    For the menu item button, I read the article you provided and enabled css classes on the menu items. However, I am still unsure on how to create a custom css class and where to place the code.

    Also, for the sticky navigation, how can I change the color of the sticky navigation like in the Access demo? It changes to a blue background on scroll. And one last question – is it possible to change the menu on the sticky nav, if so how?

    Thank you!

    #1655183
    Ying
    Staff
    Customer Support

    Hi Iou,

    This is where you add custom CSS class to menu items:
    https://www.screencast.com/t/KN848Cky2zV

    Go to customizer > colors > primary navigation > parent items > background color for sticky navigation background color.

    The navigation of Access home page is transparent, because it’s using header element to merge the header with content, and the transparent color was set in the header element. This article should help:
    https://docs.generatepress.com/article/how-to-create-a-page-hero/

    #1655518
    iou

    Hi Ying,

    I already enabled the custom css on me u items like shown in your screenshot above. My question is where do I place the code that was in your guide. Do I paste the code and create the css class in the functions pho sheet?

    When I change the header background for sticker header, the nav menu turns that color and the nav menu text color changes. How can I get the standard menu to be plain white with black text and the sticky menu to be orange with white text?

    Thank you. I can send over screenshots to make things more understandable if needed.

    #1656063
    David
    Staff
    Customer Support

    The Code which is CSS can go in your Customizer > Additional CSS.
    Can you share a link to your site so i can see the current header layout ?

    #1656475
    iou

    Ah okay, thank you.

    #1656476
    iou

    I left a reply with site info in the section that support can see

    #1656729
    David
    Staff
    Customer Support

    Try this CSS:

    .sticky-enabled .main-navigation.is_stuck {
      background: orange;
    }
    
    .main-navigation.sticky-navigation-transition .main-nav > ul > li > a,
    .main-navigation.sticky-navigation-transition .main-nav > ul > li:hover > a,
    .main-navigation.sticky-navigation-transition .main-nav > ul > li[class*="current-menu-"] > a,
    .main-navigation.sticky-navigation-transition .main-nav > ul > li[class*="current-menu-"]:hover > a {
      color: #fff;
      background: orange;
    }

    change the orange to your #hex-color

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.