[Resolved] primary navigation color change when scrolling down

Home Forums Support [Resolved] primary navigation color change when scrolling down

Home Forums Support primary navigation color change when scrolling down

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #609316
    dyami

    Hi Tom,

    I’ve tried a lot of different codes but I can’t make it work.
    The primary navigation is transparent. What can I do to change the color when scrolling down?
    (for example black or white)

    The code I now have in the Additional CSS section is:

    .main-navigation:not(.is_stuck) {
    position: fixed;
    left: 0;
    right: 0;
    }

    Thanks!

    GeneratePress 2.1.2
    GP Premium 1.6.2
    #609350
    David
    Staff
    Customer Support

    Hi there,

    to begin you can use the Sticky Navigation function in the Customiser, to fix the navigation when scrolled, so that CSS isn’t required. Then you can target it like so:

    #sticky-navigation {
    	background-color: #fff;
    }
    #609361
    dyami

    Thanks it worked for the most part. When I scroll down the navigation bar turns white, but when it’s on the top of the page it is a light grey/ white color. Not transparent.
    Also, is it possible for the navigation to change text color when scrolling down? (from white to black)

    #609365
    David
    Staff
    Customer Support

    Can you share a link to the site? You can edit the original topic and use the Site URL field for privacy

    #609386
    dyami

    Sure!
    I’ve just added the link in the original post.

    #609412
    David
    Staff
    Customer Support

    OK so a bit more CSS, the first two rules are to move the page content under the navigation. Note that this may effect the way your Page Builder operates so this may need to be commented out when your editing the page. The third code will allow you to style the sticky nav text color.

    #site-navigation {
    	position: relative;
    }
    #page {
    	margin-top: -45px;
    }
    
    #sticky-navigation .main-nav ul li a {
    	color: #000;
    }
    #609415
    dyami

    Thank you so much David! It worked and it looks perfect now πŸ™‚ πŸ™‚

    #609416
    David
    Staff
    Customer Support

    Glad to be of assistance πŸ™‚

    #609422
    dyami

    Oh, just one more question. Do you know why there is a very thin white line above the page?
    This happened after I added the 3 CSS codes.

    #609484
    Leo
    Staff
    Customer Support

    That’s because margin-top: -45px is used and the height of that header is 45.6px

    I would recommend using our page header add-on to insert that hero image/slider:
    https://docs.generatepress.com/article/page-header-content/

    Then you can use the instruction here to merge it with navigation:
    https://docs.generatepress.com/article/merging-the-page-header-site-header/

    Let us know if this helps.

    #611066
    dyami

    I used your page header add-on and it looks great!
    Thanks for all the support!
    πŸ™‚

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