How do I create a sticky navigation bar?

Store Design
1

Hi, I’m looking to create a sticky navigation bar for my Shopify store (Checkout) that stays at the top of the page while scrolling. I’m using the Kadence theme. Could someone guide me on how to achieve this, either through custom code or theme settings? Thanks!

2

Go to your online store → customize → settings → custom css
and this code there

.site-main-header-wrap .site-header-row-container-inner {
    position: fixed;
    width: 100%;
}
3

Hi @Harryjames ,

Thank you for your question!

Please go to Theme editor > Theme settings > Custom CSS to add this code:

#main-header, div#mobile-header {
position: fixed;
width: 100vw;
z-index: 9;
}
.google-auto-placed {
margin-top: 75px;
}

I hope my answer is helpful!

Best,
Liz.

4

Hello @LizHoang ,

Go to Shopify Admin → Online Store ->Theme → Edit code → global.min.css

  • Added below code in your global.min.css file
header#masthead {
    position: sticky;
    top: 0;
    z-index: 9999;
}