Debut Theme - How to make navigation bar overlap image

Solved
Oceane
Tourist
5 0 2

Hello everyone,

 

I'm using the Debut theme and I'm trying to make the navigation bar transparent and on top of my "image with text overlay" section. But I have no idea how to move my shop content so that they overlap... I want it to look like the Boundless or Brooklyn themes where you can see the navigation bar on top of the slideshows with a transparent background. Is there a way to do so ?

 

Thank you in advance.

Replies 102 (102)
KetanKumar
Shopify Partner
24911 2497 9034

@Smartoshi 

yes please try this code

https://codepen.io/haykou/pen/FHKJg

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Umar28
New Member
2 0 0

Can you help me sir, i transparent my header but there is a small glitch. When i click on search icon it saves one page above, i want to make it normal. Here is my store share preview link https://25p01cssw1ats39b-58923679893.shopifypreview.com

Somum
Tourist
3 0 2

Hi there,

Can someone tell me how to make my menu bar transparent so that the video on my homepage overlays the menu bar?

 

Thank you.

KetanKumar
Shopify Partner
24911 2497 9034

@Somum 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DeadEndStreet
Explorer
103 0 35

Hi,

 

Also interested in this - i want a transparent menu bar and for the menu bar to move to the top of my page.

https://www.deadendstreet.co.uk/

 

I also have overlapping sections since i made rest of page transparent

 

KetanKumar
Shopify Partner
24911 2497 9034

@DeadEndStreet 

yes its possible that look but doesn't look good see attachment 

KetanKumar_0-1635576140357.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DeadEndStreet
Explorer
103 0 35

Hi Ketan - first question, how did you do that? I have tried for days what is the code to make it transparent?

I agree it doesn't look good like that but is there a way of moving the menu bar (transparent or not) to the very top of the page rather than off the top as it currently is (I can do this by removing the header section but that removes my logo -  I would ideally also like to move the logo in the menu bar as it will otherwise disappear.

If I could then get it to turn white upon scrolling (or have the option for it to be a solid colour as well) I think it would look fine.

Thank you for your assistance.

KetanKumar
Shopify Partner
24911 2497 9034

@DeadEndStreet 

yes is possible make it but your current look set as per your theme and products 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
DeadEndStreet
Explorer
103 0 35

Hi Ketan,

 

What code do i need to use to do this? Make the bar transparent?

Can you tell me?

 

Kind regards

KetanKumar
Shopify Partner
24911 2497 9034

@DeadEndStreet 

are you sure do you need this bcz that code doesn't good UI/UX is this fine for you?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing