[Support request] Best way to style Primary Nav

Home Forums Support Best way to style Primary Nav

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1185040
    Mike
    • I have a site with pages that have light backgrounds and dark backgrounds
    • All with merged headers
    • I have used the customizer to style the light header and primary nav
    • I have a Header Element to Style the Dark “Site Header

    Some issues I’m running into for having different dark/light bg complementary color schemes:
    1. How to style Nav Search
    2. How to style Mobile
    3. How to style Sticky Navigation

    #1185053
    Leo
    Staff
    Customer Support

    Hi Mike,

    The questions are a little broad but I’ll try my best:

    1. There are color options for the nav search in Colors > Primary Navigation

    2. What would you like to style on mobile? Usually it can taken care of with some CSS plus media query: @media (max-width: 768px) {
    https://docs.generatepress.com/article/responsive-display/

    3. What would you like to style? If you are using the merged header, then you can set custom navigation colors for that header:
    https://docs.generatepress.com/article/header-element-overview/#navigation-colors

    Then the sticky navigation colors would inherit from the customizer (Colors > Primary nav) to create this effect:
    https://docs.generatepress.com/article/navigation-as-a-header/#different-logo-and-navigation-colors

    If this doesn’t help, any chance you can unlock your site or provide the username/password so we can see the issues?

    Thanks 🙂

    #1185096
    Mike

    I’m sorry, I suppose I wasn’t very clear in the beginning.

    The problem: I can only style those items for either the light, or the dark background. I need to create an alternative color scheme for those items when there’s a dark background.

    #1185099
    Leo
    Staff
    Customer Support

    That case we would likely need to use some CSS and target specific pages.

    Can you unlock your site and guide me to the page in question?

    #1185137
    Mike

    Removed auth, home page & /about for light bg, /books for dark.

    Thanks for your help.

    I’ve decided to go with an opaque sticky header for sanity’s sake.

    #1185226
    Mike

    Would something like this:
    https://generatepress.com/forums/topic/changing-headers-or-deleting-headers/#post-98390
    with a slightly different hook and instead of replacing the header adding a class to something that can be used as a CSS selector?

    #1185401
    Leo
    Staff
    Customer Support

    Ok let’s take care of one thing at the time.

    Are you using the page hero on the About page just to use the custom navigation colors?

    All the navigation colors are actually here:
    https://docs.generatepress.com/article/changing-navigation-colors/

    To target the sticky navigation, you would replace this part in the code:
    .main-navigation with .main-navigation.navigation-stick.

    To target specific page, you would add the unique ID in front of the CSS.

    For example:

    .main-navigation .main-nav ul li a, 
    .main-navigation .menu-toggle {
    	color: #FFFFFF;
    }

    Becomes:

    body.page-id-xxx .main-navigation .main-nav ul li a, 
    body.page-id-xxx .main-navigation .menu-toggle {
    	color: #FFFFFF;
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.