Prevent List Menu from Becoming Hamburger Dropdown on Mobile

talula
Excursionist
24 1 4

Hello! I'm looking for a way to have the menu in the header show up on mobile in the same way it does on desktop. I only have three menu items on my site, so I trust it will be fine to navigate, I just can't figure out how to prevent that dropdown menu from taking over.

 

Here is my site: www.talulamerriwether.com

 

 

Replies 3 (3)
Hermit_the_Log
Explorer
49 4 10

Hi Talula,

 

Try this out and see how it works for you.

 

In your base.css file, should be located in your Assets folder within the Edit Code section of your theme (Online Store > Live Theme > Actions > Edit Code), you're going to locate and edit 3 pieces of code.  All of which you'll be making one change, changing 990px to 0px

 

First you're looking for the code below

 

 

 

@media screen and (min-width: 990px)
header-drawer {
    display: none;
}

 

 

 

You'll want to change that to the following

 

 

 

@media screen and (min-width: 0px)
header-drawer {
    display: none;
}

 

 

 

Next, you'll be looking for this code

 

 

 

@media screen and (min-width: 990px)
.header:not(.header--middle-left) .header__inline-menu {
    margin-top: 1.05rem;
}

 

 

 

And you'll change that to

 

 

 

@media screen and (min-width: 0px)
.header:not(.header--middle-left) .header__inline-menu {
    margin-top: 1.05rem;
}

 

 

 

Lastly, you'll be making the same change to this code

 

 

 

@media screen and (min-width: 990px)
.header--top-center .header__inline-menu {
    justify-self: center;
}

 

 

 

Changing it to

 

 

 

@media screen and (min-width: 0px)
.header--top-center .header__inline-menu {
    justify-self: center;
}

 

 

 

Below is the result I get in making these changes

 

Screenshot 2022-08-15 222039.png

 

Let me know how this works for you and if you have any questions at all

talula
Excursionist
24 1 4

Thank you for the help! I cannot seem to find those exact codes in my base.css. I've been digging around, and these are the ones that made the inline menu stay visible when I changed 990px to 0px:

 

@media screen and (min-width: 0px) {
  .header__inline-menu {
    display: block;
  }

 

@media screen and (min-width: 0px) {
  .header {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

 

It didn't seem to do anything when I changed any of the other "max-width: 990"s, so I changed a few of the "max-width: 989"s which didn't seem to do anything either. For now, I've found the menu icon code and changed the opacity to 0. Visually, it looks as I wanted -- the menu hamburger button is still there, but invisible now. 

.header__icon--menu .icon {
  display: block;
  position: absolute;
  opacity: 0;
  transform: scale(1);
  transition: transform 150ms ease, opacity 150ms ease;
}

 

Let me know if there's something else I need to do to remove the button entirely. Either way, thank you for giving me the starting point on where to look for the codes! 

Hermit_the_Log
Explorer
49 4 10

No problem! Looks like that did the trick for you! I'll dig around some more and see if I can find a way to hide it entirely