How can I create a scroll state menu bg for Divi?

Happy to be back!
How can you aid me to creating a scroll state menu in that when I scroll down my site, an instant solid whit bg will accompanied or cover the menu from being transparent? Site url:


  • Barni

    I'm good and I bet you too @Michael Bissett. Thank you very much, that's what I'm looking for but I want the solid white bg to be instant once a visitor start scrolling down but seems we are stuck with the effect showing almost down the site. I tried this as well but doesnt just work;
    /*original state*/
    .page #main-header, .post #main-header, .single #main-header {background-color:rgba(31,31,31,1)!important;}
    .home #main-header{
    background-color: rgba(31,31,31,0.00) !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
    -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);
    -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);}

    /*scrolling state*/ {background-color: rgba(31,31,31,0.6) !important;}

    Phew! How can I make the menu bg to show instantly once the site is scrolled?

  • Ash

    Hello @Barni

    I hope you are well today.

    Please use the following code in your theme's footer.php after wp_footer():

    <script type="text/javascript">
    jQuery(function($) {
      $(window).scroll(function() {
        var y = $(window).scrollTop();
        if( y == 0 ){
          if( ! $('.et-fixed-header').length ){

    Please note that, this changes will be lost in next update. So it's worth to note down this changes somewhere and apply again after your updates.

    So, this is recommend in this case you use a child theme.

    Hope it helps :slight_smile: Please feel free to ask more question if you have.


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.