Adding a Floating Navigation Bar with Background Photo

Store Design
, , ,

Topic summary

Goal: add a floating navigation bar over a hero background image using a basic free Shopify theme.

Initial solution: a CSS tweak to fix and style the header. Steps: Online Store → Edit Code → theme.css/base.css. Code used: .header-wrapper { position: fixed; width: 95%; left: 0; right: 0; margin: auto; top: 8px; border-radius: 8px }. It worked well on the homepage.

Issue: the fixed header disrupted layouts on product, collection, and cart pages, and on mobile. The requester asked to keep the sleek floating menu only on the homepage and retain a standard fixed header elsewhere. Screenshots show the breakage.

Next steps: one responder requested store URL and collaboration code (Shopify collaborator access) to add homepage-only classes and adjust mobile responsiveness; another noted theme customization is necessary. The requester applied top padding as a quick fix.

Status: tentatively resolved with padding; being monitored. Open items: properly scoping CSS to the homepage and ensuring mobile responsiveness, likely via targeted selectors or developer collaboration.

Summarized with AI on December 13. AI used: gpt-5.
1

Hello Shopify community,

I try to achieve such kind of hero photo and menu bar, how i can achive that with basic free themes any ideas or suggestions?

Screenshot 2024-11-21 at 14.28.46.png
Screenshot 2024-11-21 at 14.28.46.png2880×202 117 KB

Screenshot 2024-11-21 at 14.34.09.png
Screenshot 2024-11-21 at 14.34.09.png2880×634 336 KB

2

Hi @junktiontbs

This can be achieved using CSS code for that kindly provide the URL of the Store and password if it is password protected.

3

Hello @junktiontbs , Hope you are doing great, unfortunately the theme you want will be customized.

Wish you good luck for more!

4

Hello,

here it is https://mwpcbi-sv.myshopify.com/

5

Hi @junktiontbs

You can try adding this CSS hope this helps you:

You just need to follow these steps:

  1. Go to the Online Store
  2. Edit Code
  3. Find theme.css / base.css

And past that CSS Code:

.header-wrapper { position: fixed; width: 95%; left: 0; right: 0; margin: auto; top: 8px; border-radius: 8px; }

I hope this solution works for you!
If it does, please Like It and Mark It As A Solution, or support me by Buying Me A Coffee to keep me going!

6

Thanks a lot Mehran!

That worked quite well!

1 Like
7

@junktiontbs

Glade to hear that it worked if you need any help feel free to ask

8

One more question here, it works well on home page, but it ruins other pages like product page, collections and etc. same on mobile, how it is possible to have this nice sleek design menu on top only on home page and then all rest pages just fixed?

Screenshot 2024-11-24 at 00.41.24.png
Screenshot 2024-11-24 at 00.41.24.png2056×948 95.2 KB

Screenshot 2024-11-24 at 00.40.47.png
Screenshot 2024-11-24 at 00.40.47.png2056×948 316 KB

here you can see how it breaks product and cart page. Thanks

9

Hi @junktiontbs

Can you share your store URL and Collaboration code so I can add the class just for the home page and check for mobile responsive as well because this thing need some customization

10

I think, it solved with top paddings, lets see how it works and just in case, i’ll revert back to you! Thanks

1 Like
11

sure always here to help any kind of