Docs

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi guys,

I have a transparent header which is fixed top.

The problem is once we scroll down the page the navigation cannot be seen unless the background is dark. This is not the case with parts of the pages.

So I was wondering if it can change from transparent to #292929 when we start scrolling down?

It is also a problem on mobile menu so the dropdown would need the same background colour also.

Login to follow..

[3b1a2f46-a516-40cf-beba-b611930e4819]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.x-navbar.x-navbar-fixed-top {
  background: #292929;
}

@media only screen and (max-width: 979px) {
.x-navbar {
  background: #292929;
}
}

Hope this helps.

Cheers!

[3b1a2f46-a516-40cf-beba-b611930e4819]

That’s great, is it possible to add some transparency? Say 80%?

thanks

[Joao]

Hi There,

Change the color from #292929; to rgba(41,41,41,0.8);

Hope that helps

Joao

[3b1a2f46-a516-40cf-beba-b611930e4819]

This is great – but can it stay transparent on tablet (and smaller) until the burger menu icon is pressed to open the menu?

thanks

[Rupok]

Hi there,

Thanks for writing back. Yes if you add the transparent background within media query :

.x-navbar.x-navbar-fixed-top {
  background: #292929;
}

@media only screen and (max-width: 979px) {
.x-navbar {
  background: rgba(41,41,41,0.8);
}
}

Hope this helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Sorry that doesn’t seem to have done anything – I have left the code in

thanks

[Paul R]

Hi,

Kindly replace the code provided above with this

.x-navbar.x-navbar-fixed-top {
  background: #292929;
}

@media only screen and (max-width: 979px) {
body .x-navbar {
    background:transparent;
}

body .x-navbar.x-navbar-solid {
         background: rgba(41,41,41,0.8);
}
}

Then add this in Custom > Edit Global Javascript in the customizer

jQuery(function($) {
     $('.x-navbar').toggleClass('x-navbar-solid');
});

Hope that helps.

[3b1a2f46-a516-40cf-beba-b611930e4819]

Hi,

The custom CSS made it transparent and then the javascript turned it back again?

I have left the code in

thanks

[Nabeel A]

Hi again,

Try adding the following code in Custom > Edit Global CSS

@media only screen and (max-width: 979px) {
body .x-navbar.x-navbar-solid {
    background: transparent;
}
}
.x-navbar-bg-color {
    background: rgba(41,41,41,0.8) !important;
}

Then add this in Custom > Edit Global Javascript in the Customizer

jQuery(function($) {
   $('.x-btn-navbar').click(function(){
       $('.x-navbar').toggleClass('x-navbar-bg-color');
   });
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[Author]

Posts