Docs

[jdfrizzell]

I would like the background of my collapsed mobile menu button to be transparent. I want to keep the way I have the background/body once it is clicked on, however.

http://01d.753.myftpupload.com/

[Rupok]

Hi there,

It seems you have added the below code :

body .x-navbar {
  background-color: black;
  margin-left: 75%;
  opacity: 0.6;
  position: fixed;
  transition: all 0.6s ease 0s;
  width: 25%;
}

Let’s remove this or the background-color and opacity properties from here to get expected result.

[jdfrizzell]

I would like that to appear once the menu is opened, though. Is there a way to do that?

[Rupok]

Hi there,

In that case you can update the above CSS to following :

body .x-navbar {
  margin-left: 75%;
  position: fixed;
  transition: all 0.6s ease 0s;
  width: 25%;
}

.x-navbar.opaque-navbar {
  background-color: rgba(0,0,0, .75);
}

Then add this under Custom > JavaScript in the Customizer.

jQuery( function($) {    
      $(window).on("scroll", function () {    
    if($('.x-nav-wrap.mobile').hasClass('in')) {
      $('.x-navbar').addClass('opaque-navbar');
                }else {
                        $('.x-navbar').removeClass('opaque-navbar');
                }   
  }).scroll();
});

Let us know if that works for you.

[Author]

Posts