What's your biggest current challenge? Have your say in Community Polls along the right column.

How to change header on empire theme to be sticky and not have any animations/"hamburger menu'

How to change header on empire theme to be sticky and not have any animations/"hamburger menu'

dtffox
Excursionist
20 1 5

Hi! I'm looking to change the header on my site to be a sticky header with the navigation bar and not move when scrolling up or down. How could I do that?

 

www.vinylfoxusa.com 
Password: VINYL2024!

Replies 2 (2)

Moeed
Shopify Partner
6346 1721 2079

Hey @dtffox 

 

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:

Moeed_0-1731072118486.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


dtffox
Excursionist
20 1 5

Hello, this worked to make the navigation bar sticky and hide the menu button when scrolling. Although, when you scroll down the top part of the header still shifts to the right and basically makes room for the hidden button. Is there a way to make the whole header stay the same when scrolling and not shift at all?