Navigation
Archive / Navbar Transparent to Color on Scroll Without Line
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • June 9, 2016 at 10:54 pm #1035236
    AmicusFounders
    Participant

    Hi,

    How do I make the navbar go from transparent to a white background on scroll? I want the navbar to be transparent before the page begins to scroll. Also, I do not want there to be a line under the header while the navbar is transparent at the top of the page. If this happens because the header is in a container, please instruct on a work around.

    Thanks!

    June 10, 2016 at 1:39 am #1035400
    Paul R
    Moderator

    Hi,

    Thanks for writing in!

    You can add this under Custom > Edit Global CSS in the Customizer.

    
.home .masthead {
   position:absolute;
   width:100%;
   z-index:999999;
}

.home .x-navbar {
   background-color:transparent;
}

.home .x-navbar.x-navbar-fixed-top {
    background-color:#fff;
}

    Hope that helps.

    June 10, 2016 at 10:31 pm #1036876
    AmicusFounders
    Participant

    Worked like a charm!!! Many thanks!

    June 10, 2016 at 11:43 pm #1036936
    Prasant Rai
    Moderator

    Happy to hear that. Feel free to ask us again. Have a great day! 🙂

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1035236 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>