Hamburger menu not collapsing

Support
#1

Hi, I’ve used some custom CSS to make the hamburger menu the only menu. It works okay in Firefox, but in other browsers it doesn’t collapse. Can you please help?

CUSTOM CSS

/*HAMBURGER MENU FUNCTIONS > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > */

.x-nav-wrap.mobile {
background: #fff;
width: 40%;
float: right;
}

.nav li a {
color: #333;
}

/* Enable Mobile Navbar on Desktop */

.x-navbar .desktop {
display: none !important;
}

.x-navbar .x-btn-navbar {
display: inline-block;
}

.x-nav-wrap.mobile.collapse.in {
display: none;
}

.x-nav-wrap.mobile.collapse {
display: none;
}

.x-nav-wrap.mobile {
display: block;
}

.x-btn-navbar {
text-shadow: none;
color: #fff !important;
float: right;
}

#2

Hi there,

Your site looks great!

Kindly remove the custom code you have added to have the mobile menu display by default site wide and use this instead:

  .masthead-stacked .x-btn-navbar {
    display: inline-block;
  }

  .x-nav-wrap.desktop {
    display: none;
  }

  .x-nav-wrap.mobile.collapse.in,
  .x-nav-wrap.mobile {
    display: block !important;
  }

  .x-nav-wrap.mobile.collapse,
  .x-nav-wrap.mobile.x-collapsed {
    display: none !important;
  }

Hope this helps.

#3

Thanks for the speedy reply, that code injected, now I don’t have a hamburger menu at all. I left it in so you could look and adjust it? Thanks again for your help!!! !!

#4

Hi @hjwallace

I believe this is the correct code you need to use, please replace any previous code with this one:

    .x-nav-wrap.desktop {
        display: none;
    }
    .x-nav-wrap.mobile.collapse.in,
    .x-nav-wrap.mobile {
        display: block;
    }
    .x-nav-wrap.mobile.x-collapsed {
        display: none;
    }
    .masthead-inline .x-btn-navbar {
        display: inline-block;
        float: right;
    }

Thanks.

#5

Yes! Thanks to you both for your help.

#6

You’re most welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.