Help with selector to add pipe between menu items

  • Resolved barnez

    (@pidengmor)


    2 years, 1 month ago

    Hi,
    As the title states, I am looking for a little help to get the correct selector to add pipes between menu items via CSS. I can see from the inspector that the main header menu uses the following selectors:
    .main-navigation .primary-menu-container > ul > li.menu-item > a
    .header-navigation ul li.menu-item > a

    However, when I try to modify that to add a pipe after each menu item, I can’t get any of the changes to show e.g.

    
.main-navigation .primary-menu-container > ul > li.menu-item:after a {content:"|"; color: #515151;}

    Any suggestions?

    • This topic was modified 2 years, 1 month ago by barnez. Reason: fix typo

    The page I need help with: [log in to see the link]

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

  • You have the after pseudo-class in the wrong place in your CSS code. It is the lowest point where something can come because in HTML there are no other elements below it. With you there is still an “a”.

    Correct would be:

    .main-navigation .primary-menu-container > ul > li.menu-item a:after {
 content:"|"; color: #515151;
}

    if you want to insert the pipe after the links. Or

    .main-navigation .primary-menu-container > ul > li.menu-item:after {
 content:"|"; color: #515151;
}

    if you want it to come after the list item. In any case you have to work on the spacing (via padding or margin).

    Thread Starter barnez

    (@pidengmor)

    Thanks for the advice and link. That’s got me moving again.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Help with selector to add pipe between menu items’ is closed to new replies.