Dawn Theme make image overlay navigation bar

jessenlshop
New Member
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 17 (17)
oscprofessional
Shopify Partner
9201 1563 1928

Okay,
please add the below code

.header {
    font-weight: bold;
}
.header-wrapper {
    left: 0;
    right: 0;
}
If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Myellagroup
Excursionist
24 0 2

Hi @oscprofessional 

That worked too. 

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

 

oscprofessional
Shopify Partner
9201 1563 1928

Sorry for that.

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

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

If helpful then please Like and Accept Solution. Want to Speed up your Shopify Website Guranteed result Whats app
| Hire us
| Expert Site Speed Optimization | Performance Site Audit | Shopify Private App | Custom Theme Development & Modifications any Shopify Theme | Shopify SEO | Digital Marketing
For Quick Chat | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Myellagroup
Excursionist
24 0 2

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
2567 309 641

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.

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Myellagroup
Excursionist
24 0 2

Hi @Zworthkey 

Sorry about the delay in reply.

Yes that worked. Thanks a bunch!

Zworthkey
Shopify Partner
2567 309 641

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

If helpful, please Like and Accept Solution.
if you Want to modify or Customize your theme ,
Hire us | Whatsapp. and we also help you to guide how to reach to your potential customers to increase brand presence, engagements and sales for your business or Want to know more. Read our Shopify Blogs.Email us: sales@zworthkey.com
Myellagroup
Excursionist
24 0 2

Hi @Zworthkey 

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