Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Trouble with a divider pipe in my navbar

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #39086
    slb535
    Member

    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.

    #106854
    Paulie_D
    Member

    It’s here : Line 228 of theme.css

    #nav li::after {
    content: "|";
    padding-right: 5px;
    padding-left: 5px;
    }
    #106869
    matt_sanford
    Participant

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

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

    #106871
    Paulie_D
    Member

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

    #106876
    slb535
    Member

    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.

    #106879
    slb535
    Member

    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;
    }
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.