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

Solved
abcxytz1234
Explorer
77 1 24

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!

 

597F2650-C61A-4B9C-B219-7BECB6B80348.jpeg

751EEC75-DF57-46DB-BCA4-00CFCBBAE1F0.jpeg

614662AB-F811-42A4-A065-5A5AD76EDC94.jpeg

 

 

see screenshots 

 

0 Likes
HardikDavra
Shopify Partner
2327 367 999

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;
}

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
abcxytz1234
Explorer
77 1 24

@HardikDavra 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? 

0 Likes
HardikDavra
Shopify Partner
2327 367 999

@abcxytz1234 

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

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
abcxytz1234
Explorer
77 1 24

@HardikDavra 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?

0 Likes
HardikDavra
Shopify Partner
2327 367 999

@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%);
}

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
abcxytz1234
Explorer
77 1 24

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

 

 

0 Likes
HardikDavra
Shopify Partner
2327 367 999

This is an 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%);
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
Pallavi
Shopify Expert
2235 369 484

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%);
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
abcxytz1234
Explorer
77 1 24

thank you so much! works beautifully