How to add shadow on the menu bar and footer

Sparkling
1

Hello again, is it possible to add a shadow on the menu bar? and also play with the shadow color? I attached a screenshot of this and how I want it to look like.

How do I also play around with the alignment of the menu texts? I want to move it a bit lower.

And as for the footer, same as the header, I want to a shadow if that’s possible. Thanks in advance!

2

Hi @aiiah,

I hope you are well today and thank you for your question.

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

Best Regards,
Movin

3

Heya Movin, here’s the website http://www.thesolodrifter.com/destinations/

Thanks!

4

Hi,

Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

.navbar {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
#footer-area{
-webkit-box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px -4px 5px 0px rgba(0,0,0,0.75);
}

Adjust the values and colors according to your needs, for more reference, box-shadow - CSS: Cascading Style Sheets | MDN for a box shadow generator, http://www.cssmatic.com/box-shadow

Let us know,

Thanks,
laranz.

5

Thanks Laranz, however on the footer part it worked but on the menu at the top it didn’t change…

LINK: http://www.thesolodrifter.com/destinations/

6

I visited your shared site and saw you are using the shared code incorrectly as shown in the attached screenshot.

Please use it as it is provided above.

7

oh my! so that’s what it was, I deleted them now, thank you so so much for your help!
have a great day!

8

You are always welcome here :slight_smile:

Let us know if you have any other questions by creating seperate topic for it.

If you’re happy with our service, Please don’t forget to review & rate us in WordPress [Sparkling] Reviews | WordPress.org. :slight_smile: