How can I remove a border from 1 menu item?

Community Forums Forums Design Tips and Tricks How can I remove a border from 1 menu item?

This topic is: resolved

Tagged: , ,

This topic contains 2 replies, has 2 voices, and was last updated by  sebgates 11 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #83559

    sebgates
    Participant
    Post count: 57

    Hi, I am making a site that requires spacing bars between menu items. I created this by adding a 2px solid white border to the right hand side of the menu items.

    I am trying to remove the border on the last menu item (contact) – in this case: #menu-item-12 by adding a specific rule for that id = border-right: 0px

    Nothing happens.

    Can anyone suggest a way to get rid of the border-right on the last menu item?

    http://151.252.1.90/~active/
    #83560

    Peter
    Participant
    Post count: 95

    I think you forgot to select the anchor

    #menu-item-12 a { border-right: 0; }

    or this works also:

    .genesis-nav-menu > .menu-item:last-child > a { border-right: 0; }

    Note: I used > here so it won’t affect the sub menus, but you don’t have to. :last-child isn’t supported in IE8 though, if that matters. http://caniuse.com/#search=last-child

    #83561

    sebgates
    Participant
    Post count: 57

    Thanks Peter, that sorted it. Top man. I did do this myself a year ago but I have forgotten what I did to achieve it. I will add your code to my snippets file.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.