Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #691301

    I’m trying to add a “/” between the menu items in my main menu. I followed some instructions I got from here (http://stackoverflow.com/questions/6285359/text-separators-for-li-elements) and modified it to fit my main menu using this code:

    .av-main-nav li::before{
    content: “/”;
    font-size: 30px;

    Now while it adds the /, it seems to push all the text in the menu way down and no amount of fiddling around seems to be working correctly.
    You can see the page here: http://www.pclmedia.ca

    Can someone possibly help? Not sure what I’m missing.

    Also, what would be the CSS to remove the content from the before the first menu item (the one right before the About item).

    ps: yes I’m aware it would be easier to use a right border using css to make the separators but my clients were very clear on wanting that Slash :(


    your idea to make it before li is good because otherwise on hovering the separtator will do the same thin as the link itself.

    The only thing is positioning
    But please overwrite your input on that

    The first rule is to have no sign in front of first list point (:first-child is what it says the first li after ul)
    the li.menu-item-top-level is to prevent that submenu list points will have a sign in front of their links.

    .av-main-nav li.menu-item-top-level:first-child::before {
        content: "";
    .av-main-nav li.menu-item-top-level::before {
        content: "/";
        font-size: 30px;
        font-weight: 400;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);


    Please do let us know if that works for you.

    Thanks a lot



    Works perfectly!!
    Thank you SO much!!!!!!!!!

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

The topic ‘add "/" as a menu seperator’ is closed to new replies.