We're evolving to serve you better! This current forum has transitioned to read-only mode. For new discussions, support, and engagement, we've moved to GitHub Discussions.

Hamburger mobile menu for entire website

April 20, 2022 at 1:02 am #7320

[anonymous]

Hello! I’m using the Mercury theme, and would like the hamburger menu seen in mobile view to be the default menu for the entire website. It seems like there’s some kind of Javascript involved to make the menu style change when it reaches a certain page width. What would be the most efficient way to make the hamburger menu permanent?

April 20, 2022 at 6:34 am #7324
[anonymous]
I think I’ve solved my own issue. Here are the modifications I made:

Hiding the desktop menu

I modified the following code in main.css
```
.navbar .navbar__menu {
  /*mod to hide regular desktop menu*/
  /*display: -webkit-box;
  display: -ms-flexbox;
  display: flex;*/
  display: none /*custom*/;
  list-style: none;
  margin: 0;
  padding: 0;
}
```
Making the hamburger menu always visible

I commented the following code out of main.css, but it can be deleted as well.
```
/*Removing this media query so that the hamburger mobile menu is always visible*/
/*@media all and (min-width: 56.25em) {
  .navbar .navbar__toggle {
    display: none;
  }
}*/
```
I made a few other changes to the mobile overlay so that the icon was to the right, the menu overlay filled the entire screen, a “MENU” text, the overlay took into account the scrollbar gutter, etc., but this was the bulk of it.