[candidexmedia]

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?

[candidexmedia]

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.

[Author]

Posts