Docs

[isakfyksen]

Hi, I used the Superfly Menu plugin to create a hamburger menu on my site.

It was pretty easy, I just made a copy of global/_nav-primary.php in my child theme, then replaced the call for the primary menu with <i id="c-superfly-toggle" class="x-icon x-icon-bars" data-x-icon="" aria-hidden="true"></i> and added the id #c-superfly-toggle as a trigger in the superfly control panel.

After that I styled #c-superfly-toggle to my liking in CSS, and it looks great on desktop.

Now for mobile, I think the same menu works great, so in order to keep the desktop menu on lower screen sizes I read this post: https://community.theme.co/forums/topic/remove-mobile-menu-2/

Then I added a bit of CSS to the original code from the post above, so it reads like this:

@media (max-width: 979px) {
  .masthead-inline .x-btn-navbar {
    display: none !important;
  }
  .x-nav-wrap.desktop {
    display: initial !important;
  }
}

And now it works on all screen sizes. I initially had some issues I wanted to ask about, but as I was writing this post I managed to solve them, so now I’m just sharing it in case it helps someone else. I know there are entire plugins for this specific purpose, but it’s nice to be able to do it with the features all ready provided with X 🙂

[Lely]

Hello There,

Thank you for sharing this information. Hope this helps others as well.

[Author]

Posts