How do I add vertical lines between navigation labels? – menu in TwentyTen theme

  • tombo123

    (@tombo123)


    10 years, 3 months ago

    For example, it should look like below:
    HOME | WORK | STATEMENT | RESUME | CONTACT

    I tried the codes below in style.css — adding the last line.

    #access a {
    color: #000;
    display: block;
    line-height: 14px;
    padding: 0 10px;
    text-decoration: none;
    border-right: 1px solid #000;
    }

    But then, I get a line on the right side of Navigation label “CONTACT”, which I don’t want. Is there a way to exclude this code applied to “CONTACT” ? Or is there an entirely different approach to achieve this issue?

    Also I’d like to know where I could control the space before and after the vertical lines.

    Thank you for your help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • CrouchingBruin

    (@crouchingbruin)

    10 years, 3 months ago

    Add this rule after your vertical line rule above:

    #access a:last-child {
   border-right: none;
}

    Also I’d like to know where I could control the space before and after the vertical lines.

    You want something other than the padding that is defined in your rule?

    Missy Oveson

    (@missybunnie)

    10 years, 3 months ago

    You could try

    #access a:after {
content: "|" ;
padding: 10px;
}
#access a:last-child:after {
display: none;
}

    You don’t need to do 10px for the padding it’s just an example of how to style this. This will give you the straight line and it is probably the shift of your back slash. And you could do other things but this is just kind of the idea of what might work. This will give you a character to play with and style.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How do I add vertical lines between navigation labels? – menu in TwentyTen theme’ is closed to new replies.