Text Outline/Drop Shadow in Navigation in Aviator

Hi,

I can't figure out how to add a simple white outline to the main navigation so it's readable against the background image. When I've inserted some simple CSS I've found with #mainNavigation it applies the drop shadow to any link on the website, and I only want it on the menu items at the top of the page. Thanks! http://www.flocksalonandgallery.com

@Flock Add to Home > Design > Custom CSS

nav#main-navigation li a {
    border: 2px solid #fff;
    padding: 3px;
}

Thank you @colin.irwin! That worked perfectly.

is there a way to make this work with a "sticky" menu? I've set my header to stay to the top of the page using:

/* Sticky Nav */
.Header {
    position: fixed !important;
}

 ... but once the nav menu moves beyond the background images the white menu merges with the white background of the pages

I HAVE THIS WORKING NOW. BUT IS THERE A WAY TO ADD A DROP SHADOW TO YOUR LOGO IN THE SAME WAY?

.. apologies for the CAPS

@colin.irwin Hi there Colin, I'm trying your above CSS code, but it isn't working? Could you assist?

Hi again @tuanphan, I have white text in my headers. I would like to create a grey shadow so the text stands out. Could you please assist?

Hi there @tuanphan or @Jia, could you please help? I'd like to create a shadow outline around the white text in my page headers (menu navigation items). 

4 hours ago, Iwan said:

Hi there @tuanphan or @Jia, could you please help? I'd like to create a shadow outline around the white text in my page headers (menu navigation items). 

Please share the website link and password (if applicable) so I can take a look

Thanks @Jia! https://beige-oleander-mp66.squarespace.com/ password: tuansqsp

2 hours ago, Iwan said:

Thanks @Jia! https://beige-oleander-mp66.squarespace.com/ password: tuansqsp

Add this code to custom css (Design > Custom CSS) and leet me know how it goes 🙂 

.header-layout-nav-right .header-nav-list {
  text-shadow: 0px 0px 5px #000;
}

Thank you!! It works @Jia😀 
So next, please, the site name is also in white in the header...can I do the same?

21 minutes ago, Iwan said:

Thank you!! It works @Jia😀 
So next, please, the site name is also in white in the header...can I do the same?

Sure thing, add this code as well:

.header-title-text a {
  text-shadow: 0px 0px 5px #000;
}

You're a star thanks!

@Jia, morning, regarding the above, if I want the shadow to apply to only certain page headers, how do I do this please?

22 minutes ago, Iwan said:

@Jia, morning, regarding the above, if I want the shadow to apply to only certain page headers, how do I do this please?

Then you'll have to add the code not in the custom css area, but the Page Settings > Advanced area of the pages you want it to be applied to.

<style>
.header-title-text a {
  text-shadow: 0px 0px 5px #000;
}
</style>

Many thanks!!

Sorry @jia, what code do I add for the navigation menu items??

Hi @Jia, I could apply the code for the site name on the relevant pages:

<style>
.header-title-text a {
  text-shadow: 0px 0px 5px #000;
}
</style>

But I also need a code to put a shadow behind the header navigation items? Thank you so much.

2 hours ago, Iwan said:

Hi @Jia, I could apply the code for the site name on the relevant pages:

<style>
.header-title-text a {
  text-shadow: 0px 0px 5px #000;
}
</style>

But I also need a code to put a shadow behind the header navigation items? Thank you so much.

It's the same code as before, just make sure it's between the <style></style> tags.

.header-layout-nav-right .header-nav-list {
  text-shadow: 0px 0px 5px #000;
}