Change background color of an expanded mobile menu

[Reazle]

Hello,

I have a transparent navbar, all the first section of my pages have a negative margin-top to go under the navbar.

And I would like to give a background-color to my navbar when it’s expanded, and give a margin-bottom to push the page content below

Thanks for your help !

[paul.r]

Hi Reazle,

Please remove the negative margin in your section, then add this in Theme Options > CSS

.home .masthead  {
            position:absolute;
            width:100%;
}

Hope that helps

[Reazle]

Hi Paul,

thanks for your answer, but it doesn’t work

[paul.r]

Hi,

Sorry, kindly change the code to this.

.masthead  {
     position:absolute;
     width:100%;
      z-index:9999;
}
.x-nav-wrap-mobile {
    background:#fff;
}

Then make sure to set your first section margin top to zero.

Thanks

[Reazle]

Now the content is not pushed anymore, this is not what I’m looking for.
Plus, the background is still transparent.

Maybe it would be possible possible to change the background-color and the marging with a JS function called by the hamburger button ?

[paul.r]

Hi,

We can try js, please remove the css codes I provided and add this in Theme Options > JS

jQuery(function($) {
    
$( ".x-btn-navbar" ).on( "click touchstart", function() {
    $('.x-navbar-inner').toggleClass('bluenav');
});
});

Then add this in Theme Options > CSS

.bluenav {
   background:blue;
} 

Change blue with the color that you like.

This is how it works on my end.

https://www.screencast.com/t/lz4p1tiVuB0

Hope that helps.

[Reazle]

That’s great !

That’s exactly what I was looking for, I also added some margin as I wanted.

Thank you Paul !

[Reazle]

Oooops one last thing please !

It works great on my computer but I still have a white background on my mobile phone…
Do you have any idea where it come from ?

[Reazle]

Ok I got it, I had to remove the touchstart and now it’s ok on mobile

[Prasant]

Glad to hear that you got it working.