Stop Collapsing Desktop Menu to Hamburger on Empire Theme

Store Design
,
1

I want to be able to see my full desktop menu at all times on desktop. I don’t need it to collapse to a hamburger icon to save space. Keeping the hamburger menu is perfectly fine on tablet and mobile. Can anyone help point me in the right direction?

Here is a video of the menu collapsing on scroll that I am trying to stop: https://www.awesomescreenshot.com/video/34301257?key=888715b02f75d4b6bb6705ac5cc3a248

Here is a link to my store: https://phcyk1-jd.myshopify.com/ pw: wecanproveit

Lastly here is a screenshot of the menu and year make model search that I want to keep fixed and sticky up top on desktop. Thanks ya’ll!

Screenshot 2024-12-04 at 8.28.58 AM.png
Screenshot 2024-12-04 at 8.28.58 AM.png3244×1398 509 KB

2

Hi @cortneyhowell7

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
@media(min-width:767px){
 div#site-header-nav {
    margin-top: 0 !important;
}
}
.site-header-menu-toggle--button {
    display: none !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

3

Hey @cortneyhowell7

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1733320064939.png
Moeed_0-1733320064939.png1902×904 190 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

4

Hi @cortneyhowell7

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@media screen and (min-width: 1024px) {
    .site-header-sticky--scrolled .site-header-main-content {
        margin-left: 15px !important;
    }
    button.site-header-menu-toggle {
        display: none !important;
    }
    .site-header-sticky--scrolled .site-header-main {
        padding-top: 20px;
    }
}

I hope this helps

Best,

Daisy

5

OMG thank you, I’ve been stuck for days. This solution is the closest and also appears to keep the hamburger menu on tablet/mobile which is great.

One thing- how do we get the header menu to stop “shrinking” on scroll. The hamburger menu doesn’t appear, and the nav stays put which is all great. But the header is still shrinking to allow for an icon even though we are hiding it on desktop.

6

Ahh.. one more thing. It’s a little buggy when I go to scroll and/or use the dropdown menus it seems that the whole navigation dissapears.