Hi everyone,
I’d like to keep my website’s main menu fixed at the top of the page so it remains visible while users scroll. I’m using [Craft theme] on Shopify. Does anyone have code or steps to implement this? Here is a link to my website: https://mysticsoundscape.com/
Thanks in advance!
Hey @xbemx ,
To keep the main menu fixed at the top of your page in the Craft theme on Shopify, you’ll need to add some custom CSS. Here’s how you can do it:
Follow these steps:
Online Store
Themes
Edit Code
In the code editor, look for the file called theme.css or similar (it might also be named main.css or style.css in the Assets folder).
Add sticky CSS:
Scroll to the bottom of this CSS file and paste the following code:
/* Make the main menu sticky */
.site-header {
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
background-color: white; /* Adjust if needed to match your header color */
}
/* To prevent content from being hidden under the fixed header */
.main-content {
padding-top: 80px; /* Adjust based on your header height */
}
Go to your website (https://mysticsoundscape.com) and scroll down to check that the main menu now stays fixed at the top.
This should work for most setups in the Craft theme, but if you encounter any issues, let me know, and I’d be happy to help troubleshoot further!’
If I was able to help you, please don’t forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!
Best Regard,
Rajat Sharma
Hi, @xbemx
You can set up the Sticky header here.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!
Hi xbemx, you can use Craft theme setting to make it sticky always.
