Docs

[Ann]

Is there a way to darken the menu that drop downs from my top navigation burger menu although I have a clear nav bar? See attached screenshot.

Ann

[Ann]

Here’s the url https://moveu.com/ 🙂

[Rue Nel]

Hello There,

Thanks for writing in! Do you want something like this, http://prntscr.com/dc8703? To darken the menu that drop downs from your top navigation burger menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media (min-width: 980px){
  .x-nav-wrap.mobile.collapse.in, 
  .x-nav-wrap.mobile.collapse.in .x-nav {
    background-color: rgba(0,0,0,0.75);
  }
}

We would loved to know if this has work for you. Thank you.

[Ann]

That’s what I had in mind! Is there a way to have one background color for homepage only? and a different one for the rest of the site?

I added the code below to have the text align to the right but it’s only aligned on desktop, not mobile. Can you help me with that too?

@media (min-width: 980px){
.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile.collapse.in .x-nav {
text-align: right;
}
}

Thanks!

Ann

[Rupok]

Hi Ann,

To set for mobile you can just use .home preceding class :

@media (min-width: 980px){
  .x-nav-wrap.mobile.collapse.in, 
  .x-nav-wrap.mobile.collapse.in .x-nav {
    background-color: rgba(0,0,0,0.75);
  }
  .home .x-nav-wrap.mobile.collapse.in, 
  .home .x-nav-wrap.mobile.collapse.in .x-nav {
    background-color: rgba(0,0,0,0.5);
  }
}

So the first part will be applied throughout the site and the last part for home.

And for the other code, you don’t need media query if you want for both desktop and mobile :

.x-nav-wrap.mobile.collapse.in,
.x-nav-wrap.mobile.collapse.in .x-nav {
    text-align: right;
}

Hope this helps.

[Author]

Posts