Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 25, 2016 at 10:57 am #691301
    tamerax

    Hello
    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;
    font-weight:400;
    }

    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 :(

    September 25, 2016 at 2:37 pm #691324
    Guenni007

    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%);
}
    September 25, 2016 at 7:01 pm #691351
    Basilis

    Hey!

    Please do let us know if that works for you.

    Thanks a lot

    Cheers!
    Basilis

    September 25, 2016 at 7:32 pm #691363
    tamerax

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

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘add "/" as a menu seperator’ is closed to new replies.