Create a blue outer glow for a navigation list

When you create a new topic on this site, there is a nice blue glow effect. I would like to produce this effect on my main navigation menu with css. I know I need to add some things to the:

#nav
#nav li
#nav li a
#nav li a:hover

but not sure what the bit of code I need is. I tried some things with box-shadow, but I couldn’t get it to have that outer glow on all edges.

Does

box-shadow: 0 0 10px #00f;

do roughly what you want?

The input with focus has:-

box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) inset, 0 0 8px #0582B6;

The second part, after the comma, is the outer glow.

The first 2 numbers are the offset. They should be 0 to have equal glow on all sides.

Hmm, neither of those had the glow on the all edges. I am not sure if the problem is in the li or div structure though. Maybe making an inner glow with a background image would be easier. Not sure I could make an outer glow with an image.

You need to apply it to a block element (such as a div).

We’ll need to see your code as the code above will work. Maybe you are hiding the overflow or something similar and thus any outer glow will be cut off.

Without seeing the code you are using we are just guessing but the code offered above will work in isolation.

Hmmm, I just used an image with an inner glow as a cop out. It looks decent, but not great. The site is becoming difficult to adjust because the HTML/CSS isn’t very clean. There are probably some issues with the way it is written and too much to try to figure out here.

The only trouble with a cop-out is the HTML/CSS won’t get any cleaner… :slight_smile:

1 Like

That may be why the css offered did not work, there may be conflicting rules.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.