Docs

[thelistener]

Hola!
I need help on two fronts on the site I’m working on

1) How can I change the background colors of the mobile menu, hamburger button from black to something else?
2) How can I make it so that the mobile menu appears on screen under 1024×768?

THANKS in advance!!!!!

[Lely]

Hello There,

Thanks for posting in and giving us your site URL.

1.) Please add the following CSS via Appearance > Customize > Custom > CSS:

a.x-btn-navbar.collapsed,
.x-btn-navbar:hover{
    background-color: red; /* Change to your preferred  background color for hamburger button*/
}
.x-navbar .mobile .x-nav {
    background-color: red; /* Change to your preferred  background color for mobile menu*/
}

2.) Please use the following CSS:

@media (max-width: 1024px){
.x-nav-wrap.desktop {
    display: none;
}
.x-nav-wrap.mobile {
    display: block;
}
.x-nav-wrap.mobile.collapse {
    display: none;
}
.x-nav-wrap.mobile.collapse.in {
    display: block;
}
body.x-navbar-fixed-left-active{
    padding: 0;
}
.masthead-inline .x-btn-navbar {
    display: block;
    float: right;
}

}

Hope this helps.

[thelistener]

AWESOME!!!! But the background is still black in the mobile menu.

[Darshana]

Hi there,

To change the black background color, you can add this under Custom > CSS in the Customizer.

@media (max-width: 979px) {
  .x-navbar {
    background-color: red;
  }
}

Hope that helps.

[thelistener]

Dang right it does, THANKS!!!!!!!!!!!!

[Prasant Rai]

You’re welcome! We are just glad we were able to help you out.

[Author]

Posts