How can I make the navigation bar sticky on the Expanse theme?

On a store I am working on, I want to have the navigation bar for my top categories be visible at all times on the site. Currently, when I scroll down, whether on the homepage or any page, the nav bar goes away and converts into a hamburger menu. Alternatively, what I want to represent is a sticky nav bar similar to this site.

https://www.li-lacchocolates.com/

Here is my current site for reference so you can see what I mean by the navigation bar disappearing when you scroll down on desktop.

https://enjouchocolat.myshopify.com/?_ab=0&_fd=0&_sc=1

This is not editable in the theme editor and might require some custom code? Again, I am using the Expanse theme. All help is appreciated!

I would also like to add the “contact us” and “store locator” that they have up in that top menu.

Hello @evaneaster ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

find header section and check this

Hi @evaneaster ,

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

store password is: gietee

Hi there! This is not the case as it only makes the top menu sticky and not the navigation at the bottom part. Like I referenced, when you scroll down the navigation menu items disappear unlike on the LiLac site where they stay but the top disappears instead.

Hi @evaneaster

You can try doing it this way:

  1. Online Store → Themes → Edit code:

  1. Find the theme.liquid file and add this code just above the tag:

  1. Next, find the theme.css file and add this code at the end of the file:
@media only screen and (min-width: 768px){
    .header-item--compress-nav {
        visibility: hidden !important;
    }
    .header-wrapper--compressed .site-header__element--sub{
        transform: translateY(0) !important;
        display: block !important;
    }
}
  • Here is the result:

We hope that it will work for you.

Thank you for the response! This is the effect I was looking for.

Hi @evaneaster ,

Regarding your concern sent to our inbox, it is difficult for us not to know how you installed it. So if possible, please give us access to your store so we will be able to take a closer look and help you.