Trouble with a divider pipe in my navbar

[slb535]

Here is the navbar in question: http://www.crowisland36pto.org

Can anyone tell me why the (grey) pipes are showing up below the navbar and how to get them back up? I’ve experimented with a background image in the LI tag, but that also shows up down below. So there’s clearly something wrong with my code, but I can’t figure out for the life of me what. And related to that, how can I keep them from showing up in the dropdowns? I’ve done this before successfully on sites and I cannot find what I’ve done wrong here. I have spent many many hours looking and trying things.

Alternatively, can anyone tell me how to constrain the height of the white border I’ve set up? Because that would work too. But everything I’ve done has messed with the height of the dropdowns.

I’d be grateful for any assistance.

[Paulie_D]

It’s here : Line 228 of theme.css

#nav li::after {

content: "|";

padding-right: 5px;

padding-left: 5px;

}

[matt_sanford]

Here is what i did to my nav bar because i was having the same problem.

Home|

Then just styling .pipes the same way you did up there ^ minus the :after selector.

[Paulie_D]

In most cases, the pipes in navbars are unnecessary. Borders work much better.

[slb535]

Thanks, Matt. I can’t do that (I don’t think) because it’s a WordPress site and the navbar is generated. Although before I declare I can’t do it, I will see if I can figure out how to add that in.

Paullie_D, I agree that the borders would be better. But is there a way to control the height that you know of? I need the borders to be about the same height as the text. At the most, they shouldn’t extend past the green bar. Right now that navbar background with the stripes is a single graphic. I’m thinking about separating the stripes into a separate div so that the border will only cover the green bar and then the stripes are below it.

[slb535]

I figured it out! (Well, the pipe placement issue. I’d still love to know if there’s a way to control border height, since that’s clearly the better way to go.)

Here’s my new code. Chris’s crazy town selector post actually was what helped me figure it out! The key to getting it in line was having the :after be referring to the a, not the li. And then keeping it out of the drop down was simply a matter of being highly specific.

#nav ul.nav > li > a:after {

content: "|";

padding-right: 20px;

padding-left: 20px;

}

[Author]

Posts