Make Hamburger Menu default

Support
#1

Hi!
Ok question. My client would like the menu to be similar to www.drumeo.com
So, a default hamburger menu and a couple items to the left.
How would you suggest approaching this while still retaining your theme?
Thanks!

#2

Hi there,

It would be best to use Pro for this as it would be quite straightforward to build using the Header Builder.

You will just need to add some items to a bar container then add a Navigation Collapsed element which will give you the burger icon that will launch and off canvas menu.

Hope this helps you get started.

#3

Hmmm, in our case the website (drumchannel.com) is using X and is highly customized. Switching to Pro would probably be too large of an overhaul at this moment. Any other suggestions?

#4

Hi again,

In X you can display the burger menu in all screen resolutions with Superfly or Ubermenu extension which you can find under Dashboard > X section. To learn more about these extensions please see https://theme.co/apex/forum/t/extension-superfly/73 and https://theme.co/apex/forum/t/extension-ubermenu/75

If you’re interested in X native solution then you can add the following code in the Theme Options > CSS to display the burger menu in all screen resolutions:

@media screen and (max-width: 1300px) {
  a.x-btn-navbar {
    display: block;
    float: right;
  }

  nav.x-nav-wrap.desktop {
    display: none;
  }
  .x-nav-wrap.mobile:not(.x-collapsed) {
    display: block !important;
  }
}

For additional header content you can use Topbar via Theme Options > Header > MISCELLANEOUS, you need to turn on the Topbar first and then add your content in Topbar Content.

Hope this helps!

#5

Ok great. I tried superfly but it just spit out a bunch of unhappy code (text) where the menu should be. I’ll give this a shot…

#6

Let us know what works for you or if you need further help.

If you don’t want the extra code of the plugin, please try the native solution within X by using custom CSS.

#7

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