Stop Collapsing Desktop Menu to Hamburger on Empire Theme

[cortneyhowell7]

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!

[steve_michael2]

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!

[Moeed]

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 </body> tag

<style>
@media screen and (min-width: 768px) {
div#site-header-nav {
    margin-top: 0 !important;
}
button.site-header-menu-toggle {
    display: none !important;
}
}
</style>

RESULT:

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

Best Regards,
Moeed

[cortneyhowell7]

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. 

[cortneyhowell7]

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.

[DaisyVo]

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