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

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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...
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

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
2 hours ago, Iwan said:

Thanks @Jiahttps://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;
}

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

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

Please give this a 👍 if it helps. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

Link to comment
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. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

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. Make sure to quote me or tag me in your reply, otherwise I won't be notified.

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.