WordPress.org

Ready to get started?Download WordPress

Forums

How do I add vertical lines between navigation labels? - menu in TwentyTen theme (3 posts)

  1. tombo123
    Member
    Posted 6 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.

  2. CrouchingBruin
    Member
    Posted 6 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?

  3. missybunnie
    Member
    Posted 6 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.

Reply

You must log in to post.

About this Topic