Dawn Theme make image overlay navigation bar

[jessenlshop]

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

[KetanKumar]

@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.

[jessenlshop]

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]

Hello guys,

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

[usamasaif]

i am facing same issue have you find any solution

[usamasaif]

facing same issue have any one find its solution.

[KetanKumar]

@jessenlshop

sorry

@usamasaif @Myellagroup please share your details

[Myellagroup]

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]

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

[Myellagroup]

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]

Okay,
please add the below code

.header {
    font-weight: bold;
}
.header-wrapper {
    left: 0;
    right: 0;
}

[Myellagroup]

Hi @oscprofessional

That worked too.

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

[oscprofessional]

Sorry for that.

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

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

[Myellagroup]

Hi @oscprofessional

That worked as well.

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

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)?

[Zworthkey]

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]

Hi @Zworthkey

Sorry about the delay in reply.

Yes that worked. Thanks a bunch!

[Zworthkey]

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

[Myellagroup]

Hi @Zworthkey

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

[KeitaAKL]

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.

[KetanKumar]

@KeitaAKL

can you please share store url