Dawn Theme make image overlay navigation bar

jessenlshop
Visitor
2 0 2

Hi everyone, 

 

I am using the Dawn Theme and I am trying to make the header image also run through the navigation. 

I have added a picture to show what I am looking for. 

Does anyone have any suggestions on how to do that and where to place the code in the Dawn theme? 

 

Hope to hear from someone!

Best, 

 

Jesse

 

Example.JPG

Replies 26 (26)

KetanKumar
Shopify Partner
36839 3635 11972

@jessenlshop 

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
jessenlshop
Visitor
2 0 2

Hi KetanKumar, 

 

Thank you for wanting to have a look!

The preview link is https://cigjfta6wbfwj1pi-56185192640.shopifypreview.com 

 

Thanks in advance!

Best, Jesse

Myellagroup
Excursionist
35 0 5

Hello guys, 

Any update on this? Was anyone able to solve this?

KetanKumar
Shopify Partner
36839 3635 11972

@jessenlshop 

sorry 

KetanKumar_0-1634946667675.png

@usamasaif @Myellagroup please share your details 

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
Myellagroup
Excursionist
35 0 5

Hi @KetanKumar 

Thanks for the reply.

I'm new to the Shopify community. I hope you're asking for the preview link by the word "details". 

Here's the link: https://oyqdxz872xvla8xj-15517073.shopifypreview.com 

Pls let me know if there's anything else you require.

Thank you

oscprofessional
Shopify Partner
15830 2369 3072

Hello

Please paste the code in base.css file

Go to Online store -> Theme -> Action -> Edit code -> Asset -> base.css

#shopify-section-header {
    position: relative;
}
.header-wrapper {
    position: absolute;
    background-color: transparent;
}

Thanks

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Myellagroup
Excursionist
35 0 5

Hi @oscprofessional 

It worked! Thank for that!

However, the 3 icons (search, cart, profile) moved a bit to the left. Is there a way to fix it?

Also, do you know how to change the weight of the menu text to bold so that the menu items are more visible?

Preview link:

https://oyqdxz872xvla8xj-15517073.shopifypreview.com

 

oscprofessional
Shopify Partner
15830 2369 3072

Okay,
please add the below code

.header {
    font-weight: bold;
}
.header-wrapper {
    left: 0;
    right: 0;
}
Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Myellagroup
Excursionist
35 0 5

Hi @oscprofessional 

That worked too. 

But I'm afraid that the menu items are not clickable now. 

 

oscprofessional
Shopify Partner
15830 2369 3072

Sorry for that.

just add this code . Its happening because of z-index value.

#shopify-section-header {
z-index: 9 !important;
}

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Myellagroup
Excursionist
35 0 5

Hi @oscprofessional 

That worked as well.

However, the new problem is that the titles of the other pages are overlapping with the header now :')

SS 1SS 1

 

Also, is there a way to make the dropdown menu translucent as before (rather than thick white background so that the background images are slightly visible)?

Capture 2.PNG

Zworthkey
Shopify Partner
5581 642 1565

hii, @Myellagroup 
Paste this code on top of the base.css file.

.spaced-section {
    margin-top: 115px !important;
}
ul.header__submenu.list-menu.list-menu--disclosure.caption-large.motion-reduce {
    opacity: 0.6 !important;
}

Thank You.

Myellagroup
Excursionist
35 0 5

Hi @Zworthkey 

Sorry about the delay in reply.

Yes that worked. Thanks a bunch!

Zworthkey
Shopify Partner
5581 642 1565

@Myellagroup 
If it is helpful then like and accept my solution.
Thank You.

Myellagroup
Excursionist
35 0 5

Hi @Zworthkey 

I don't have the option here to accept as solution.

Drimddave
Visitor
1 0 0

Please, how do I place this code in my base.css? Can you share a screenshot pls

 

KeitaAKL
Visitor
2 0 1

Hello. I am trying to set up transparent header and found this answer. I pasted the code and confirmed header is transparent. But at collection page, some of the information on collection page appears on header section. How can I fix the case?Here is the picture of the page. 

 

スクリーンショット 2022-02-21 23.31.31.png

KetanKumar
Shopify Partner
36839 3635 11972

@KeitaAKL 

can you please share store url

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
KeitaAKL
Visitor
2 0 1

Hello. Thank you for your reply.

Here is URL. 

https://akl-design.myshopify.com/

 

I added following code on the bottom of  base.css file.

 

#shopify-section-header {
position: relative;
}
.header-wrapper {
position: absolute;
background-color: transparent;
}

 

Then It applied to every page such as collection page, product page. and some information of collection 

and product page appears over header.

I think if I can apply the code on home page section, it works.

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@KeitaAKL 

thanks for details 

sorry but your store password protect 

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
MYWOOD
Excursionist
24 0 2

Ketan i've got a problem with the header section when I get on one of the menu pages.

How can i solve this?

The codes you gave are active on every page. It only should be active on the homepage i think...

 

https://mywoodpanels.com/pages/galerij

 

 

anuj2715
Visitor
1 0 0

Hi, I am facing an issue here. I applied the code and it works fine on home page, but on the other pages also its happening the same as on home page.Pleae help on this.

litenkristina
Visitor
1 0 0

same here! any solution to this?

solacemiddleeas
Visitor
1 0 0

hi can you please help me

 

usamasaif
Visitor
2 0 0

i am facing same issue have you find any solution

 

usamasaif
Visitor
2 0 0

facing same issue have any one find its solution.