Change the Navigation colour when scrolling

[adm81]

Hi,

I need to change the nav bar colour when you scroll down the page. I need this to be white but not an option in the theme colours. 

I think i can do this in CSS but no clue which line or what i need to enter.

Can some advise please. 

Thanks

[Bernadette3]

Hi @adm81 There may be a member of the community that can help you out with this. It would be helpful if you could post your website for people to see as well.

[adm81]

Thanks

http://www.smartrinnovations.com

This is my site

The Nav bar turns a pale blue colour as you scroll down the page. 

I think this can be changed in the CSS but I dont know which line to edit. 

Any help much appriciated. 

[Bernadette3]

Thanks for posting. The theme you are using is Purple Haze if that helps anyone. How comfortable are you with css/html changes?

[adm81]

Hi,

Happy to change the CSS but i cant find where the appropriate line is for the nav colour. 

If someone could point me in the right direction im happy to change it.

Thanks

Andy

[Adam7 · Accepted solution]

You're looking for this bit of code, @adm81:

#header.minimal {
    background: #e1edef;
}

[adm81]

thanks Adam

that worked

[Adam7]

Awesome! Glad to hear that.

[elgrigo]

This code did not work for me. I think I have found another solution. It is in the style files of the site under the heading Nav subheading Fixed. The property is stuck. So the CSS code would be:

<style>

.stuck {

background: #b4b4b4 !important;

}

</style>

This worked very well for me. You can put it either in SEO header of the whole site or at the header of any particular page. You can also put it in the main.css at the editor without <style>.

I hope it helped because I have searched for many hours without finding anything about it in the web.

[mvdb]

I have a question in the same ballpark: I have the Birdseye theme (graphisch.weebly.com) where the navigation background turns white once you start scrolling.

But how can I make it so, that the navigation background only turns white a bit later, after scrolling down half the page? Is this possible?

This is the CSS around it (the part about the background color in green):

 /* Fixed Nav */

body.affix .birdseye-header {

  position: fixed;

  .box-shadow(0px 1px 2px 0px @shade);

  padding: 10px 40px;

  .logo #wsite-title {

    font-size: 24px;

  }

  .wsite-menu-item {

    padding: 10px 20px;

  }

}

body.affix,

body.no-header-page,

body.splash-banner-page {

  .birdseye-header {

    background: #ffffff;

    color: @fill;

    border-color: @fill;

    .nav #wsite-nav-cart-num {

      background: @fill;

      color: @bg;

    }

    .hamburger {

      span,

      span:before,

      span:after {

        background: @fill;

      }

    }

  }

  &.alt-nav-on {

    .birdseye-header {

      background: fade(@fill, 90);

      color: @bg;

      border-color: @bg;

      .nav #wsite-nav-cart-num {

        background: @bg;

        color: fade(@fill, 90);

      }

      .hamburger {

        span,

        span:before,

        span:after {

          background: @bg;

        }

      }

    }

  }

}