Jump to content

Text Outline/Drop Shadow in Navigation in Aviator

Go to solution Solved by colin.irwin,

Recommended Posts

  • Solution

This puts a grey 'glow' behind your navigation links. Put it in your custom css. 

nav#main-navigation {
    text-shadow: 0px 0px 3px #aaa;
}

The parameters (in order) are

  • Horizontal shadow offset - currently set to 0px so it sits behind the image)
  • Vertical  shadow offset - currently set to 0px so it sits behind the image)
  • Blur radius - set to 3px so that it casts an omnidirectional shadow. Reduce this value to make the shadow sharper. 
  • Color - currently set to a mid gray
Edited by colin.irwin
Link to comment

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

Edited by AWC914
problem solved - new problem
Link to comment
  • 2 years later...
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>

 

Please give this a 👍 if it helps

Link to comment
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;
}
Edited by Jia

Please give this a 👍 if it helps

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.