Drop Shadow Styling on Navigation

[rocketboy]

I was trying to add a drop shadow to my current navigation.

I was successful with the drop shadow with the css, text-shadow: 1px 1px 1px #000; but it doesn’t give the underline a shadow.

I currently am using: #menu-main-menu { filter:drop-shadow(1px 1px 1px #000);} but it adds a drop shadow behind the drop down menu. Is there a better way to achieve this drop shadow only affecting the text and underline?

http://www.rocketboysolutions.com/Harrison/

Thank You

[ruenel]

Hello Bryce,

Thank you for writing in.

To resolve your issue, please have your code updated and use this instead:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce) {
    filter: drop-shadow(1px 1px 1px #000);
}

We would love to know if this has worked for you. Thank you.

[rocketboy]

This worked great for the primary nav, thank you for your help!

Please let me know if you would style the drop down menu any different when adding a drop shadow. I was able to achieve with:

.x-navbar .desktop .sub-menu > li > a:not(.x-btn-navbar-woocommerce) {
filter: drop-shadow(1px 1px 1px #000);
}

Thank You!

[ruenel]

Hey Bryce,

If you want to include the menus, you can just use this:

.x-navbar .desktop .x-nav > li > a:not(.x-btn-navbar-woocommerce),
.x-navbar .desktop .x-nav > li > a,
.x-navbar .desktop .sub-menu > li > a {
    filter: drop-shadow(1px 1px 1px #000);
}

Regards.