Goal: make the “SHOP MORE PRODUCTS” menu stay fixed at the top while scrolling on the homepage and collection pages of a Shopify store (ShopRevive.us).
Context: The poster has limited HTML knowledge and provided two images showing the current menu bar and the desired anchored position.
Solution provided (desktop): In Shopify Admin, go to Online Store > Themes > Actions > Edit code. Open Assets > theme.scss.css and add:
.header-bar { position: fixed; width: 100%; z-index: 1; }
This makes the header element fixed at the top, full-width, and layered above other content.
Outcome: The poster confirmed it works after some adjustments. No additional changes or alternatives were discussed.
Status: Resolved. No outstanding questions.
Notes: Images were central to illustrating the desired menu placement, but the implementation centered on a simple CSS fix.
I want the “SHOP MORE PRODUCTS” menu to anchor at the top of the screen as the customer scrolls down, on the homepage and on Collection pages. I have attached photos showing my menu bar, and a second picture showing where I want to see it as I scroll down. For reference the website is ShopRevive.us
I know very little about HTML so please be as specific as possible with your answers.
To make menu anchor on top of desktop follow this steps:
.header-bar{
position: fixed;
width: 100%;
z-index: 1;
}
Hope this works well.
After some adjusting, it works great. Thank you.
