Help: adding shadow to navigation menu + fix color of mobile menu bar

[abcxytz1234]

Hi! 

1. I need help to input the shadow below navigation bar on my website (doodle me do) like on curious pancake website. https://www.thecuriouspancake.co.uk

2. also need help to get my mobile menu in white color. Right now it’s a shade of white and gray. 

my site: https://doodlemedo.com

if you need developer access, do email me at hello@doodlemedo.com

thanks!

 

 

 

see screenshots 

[Hardik29418]

Hello @abcxytz1234 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

For 1st Website

.site-header {
    -webkit-box-shadow: 0 3px 21px -8px rgb(0 0 0 / 78%);
    -moz-box-shadow: 0 3px 21px -8px rgba(0,0,0,.78);
    box-shadow: 0 3px 21px -8px rgb(0 0 0 / 78%);
}

For 2nd Website 

.popup-navigation {
background-color: #ffffff !important;
}

[abcxytz1234]

@Hardik29418 thanks! I added to min.css asset. 

1. navigation color is fixed

2. navigation menu is sticky now so it stays there while i scroll down BUT no shadow seen. Can help me fix the shadow portion? 

[Hardik29418]

@abcxytz1234 

For https://www.thecuriouspancake.co.uk, Please place code at the end of theme.scss.liquid and then try.

[abcxytz1234]

@Hardik29418 yup done that and not working. can you help?

By the way all changes are for my site https://doodlemedo.com/. 

NOT The Curious Pancake | Quirky Cards, Handwritten Card Service.

I want the shadow below navigation bar (like curious pancake one) to be shown on my site (doodle me do) 

also I am using theme 6 for my current theme. so i guess need to override the setting of the theme?

[Hardik29418]

@abcxytz1234  Sorry, My bad.

Please place this code for shadow.

.header {
    -webkit-box-shadow: 0 3px 21px -8px rgb(0 0 0 / 78%);
    -moz-box-shadow: 0 3px 21px -8px rgba(0,0,0,.78);
    box-shadow: 0 3px 21px -8px rgb(0 0 0 / 78%);
}

[abcxytz1234]

@Hardik29418 thanks! 

1. The shadow appears but it's too much, can you make it less and more subtle like on the pancake site? 

2. also when I scroll down, the shadow disappears. Can I have the shadow so it appears once I land on the site and stays there when I scroll up and down? 

3. the shadow appears on ipad and desktop but not mobile. can this be fixed?

4. do i paste it on 

theme-skin-6.css OR  theme-skin-6.min.css?

it appears anyway regardless where i paste

[Hardik29418 · Accepted solution]

@abcxytz1234 Please remove my old code for shadow and place this code.

.header, .header__content {
    box-shadow: 0 1px 4px rgb(35 64 68 / 25%);
}

[ZestardTech]

Hello There,

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

@media screen and (max-width: 767px){
.header--style-1 .header__content,
.header--style-1 .header__content--sticky {
box-shadow: 0 1px 4px rgb(35 64 68 / 25%);
}
header#header {
box-shadow: 0 1px 4px rgb(35 64 68 / 25%);
}
}

[abcxytz1234]

thank you so much! works beautifully 🙂

[Hardik29418]

@abcxytz1234 Thank you for the update.