Solved

How to remove box shadow from the dropdown menu Dawn theme

kaylaemcfadden
New Member
5 0 0

Hello, I was able to code my store so that the navigation/menu was transparent, but there is still a slight shadow and outline that appears in the dropdown menu. How can I remove this? 

 

Thank you.

 

Screenshot 2024-02-29 at 14.32.04.png

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1729 481 354

This is an accepted solution.

Hey @kaylaemcfadden,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.js details>.header__submenu {
    border: none !important;
    box-shadow: none !important;
}

.js details>.header__submenu > li > a {
    padding-left: 10px !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709218888989.jpeg

 

 

I noticed your header once you scroll down is fully white and you can't see anything. You can follow the same steps above and fix that by adding the code below, if you want to.

<style>
.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper.gradient {
    background: linear-gradient(179deg, black , transparent) !important;
}

.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header header {
    padding-bottom: 10px !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 8 (8)

ThePrimeWeb
Shopify Partner
1729 481 354

Hey @kaylaemcfadden,

 

Can I have the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
kaylaemcfadden
New Member
5 0 0

Hello, yes its lolaatelier.fr

ThePrimeWeb
Shopify Partner
1729 481 354

This is an accepted solution.

Hey @kaylaemcfadden,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.js details>.header__submenu {
    border: none !important;
    box-shadow: none !important;
}

.js details>.header__submenu > li > a {
    padding-left: 10px !important;
}
</style>

 

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1709218888989.jpeg

 

 

I noticed your header once you scroll down is fully white and you can't see anything. You can follow the same steps above and fix that by adding the code below, if you want to.

<style>
.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header.header-wrapper.gradient {
    background: linear-gradient(179deg, black , transparent) !important;
}

.section-header.shopify-section-header-sticky.scrolled-past-header sticky-header header {
    padding-bottom: 10px !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
kaylaemcfadden
New Member
5 0 0

Thank you so much! The first code worked. I'm still working on my sticky header but thank you!

leticiahomeware
Visitor
1 0 0

Hi 

I need help with my drop down menu, it casts a pink shadow over the main image page every time the menu drop down is selected, how do I get rid of that? I've tried setting all shadows for drop downs to 0% already, problem still exists. 

 

leticiahomeware_0-1712892548564.png

 

ThePrimeWeb
Shopify Partner
1729 481 354

Hey @leticiahomeware,

 

Can you share the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

techlyser_web
Shopify Partner
1404 262 276

Hello @kaylaemcfadden 
Can you share store URL?

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

diego_ezfy
Shopify Partner
2958 565 887

@kaylaemcfadden 



1. In your Shopify Admin go to: online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

header-menu > * > ul{
    box-shadow: unset !important;
}



If it helps you please click on the "like" button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

◦ Follow my blog & youtube for coding tutorials.
◦ Replace apps with copy/paste code snippets and save money.