I am testing out Source, and am liking it so far. I would like to add drop shadows to the text in the Source Navigation stack. Shadows are not built-in, so I am wondering what would be the best way to accomplish that? I have the Source add-on stacks if that helps. Thanks.
hi @Gort -
As you say - that is not built in but is easy to achieve with a little css. What exactly is it you want to have the shadow? All text in the nav bar? Just the links? Here is what you could use to style the links:
.navbar {text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4)}
Note you can tweak the text-shadow values to suit. Or you can google âtext shadow css generatorâ and you will find a lot of tools that will let you visualise different settings and then copy the code.
The .navbar bit is the bit specifying what elements should pick up the styling. The links in the Source Nav bar all sit within a div/wrapper that contains the class name ânavbarâ.
If it is not the links you want styled let me know.
3 Likes
I was going to post this one to add a shadow to the links and also the title, when I saw Stuartâs reply above.
.nav-content h4, .nav-content ul {text-shadow: 0px 2px 4px rgba(51,51,51,0.5)}
This is a useful shadow generator to create the type of shadow you want.
3 Likes
Thank you Stuart and Gary, these are excellent solutions. Yes, I only need the shadows on the navigation links. All good.