How to remove box shadow from the dropdown menu Dawn theme

kaylaemcfadden · ‎02-29-2024

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.

ThePrimeWeb · ‎02-29-2024

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.

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
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎02-29-2024

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
Check out our interview with Shopify!

kaylaemcfadden · ‎02-29-2024

Hello, yes its lolaatelier.fr

ThePrimeWeb · ‎02-29-2024

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.

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
Check out our interview with Shopify!

kaylaemcfadden · ‎02-29-2024

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

leticiahomeware · ‎04-11-2024

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.

ThePrimeWeb · ‎04-12-2024

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
Check out our interview with Shopify!

niraj_patel · ‎02-29-2024

Hello @kaylaemcfadden
Can you share store URL?

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 · ‎02-29-2024

@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

◦ Replace apps with copy/paste code snippets and save money.
◦ Follow my blog & youtube for coding tutorials | Let's work together - click here to hire me!

How to remove box shadow from the dropdown menu Dawn theme