How to add shadow on the menu bar and footer

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!

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,

Heya Movin, here’s the website



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 */
-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,

Let us know,


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


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.

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

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 | :slight_smile: