How to insert pipeline between each menu item

  • Hello

    I would like to insert the pipeline character (|) between each two menu item of the menu bar, but I can’t get to do it. I tried with this code:

    .main-navigation ul { margin: 0; padding: 0; }
    .main-navigation ul li { list-style-type: none; }
    .main-navigation li:before { content: ” | “; }
    .main-navigation li:first-child:before { content: none; }

    but the pipelines appears in a distinct row and the menu items in the row under it.

    Please, any help?

    Thank you

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you show us your website

    Alternative, use
    border-right: solid 1px orange;
    for example on the element?

    Thread Starter rafaellinuxuser

    (@rafaellinuxuser)

    I thought that too, but that makes a line from top to bottom of menu bar, and I only want a vertical line not higher than the line heigh.

    Thank you anyway!!!!

    Thread Starter rafaellinuxuser

    (@rafaellinuxuser)

    I can’t send an URL cause is in a intranet, but I could send a screen capture (I think that here is not possible).

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In the “Additional CSS” section of the dashboard add this:

    
@media screen and (min-width: 768px) {
    .menu :first-child:after {
        display: none;
    }

    .menu li {
        display: block;
        float: left;
    }

    .menu li:after {
        background: red;
        bottom: 0;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        width: 1px;
    }
}

    https://codex.www.ads-software.com/CSS#Custom_CSS_in_WordPress

    Thread Starter rafaellinuxuser

    (@rafaellinuxuser)

    I’m working directly in my child theme CSS file, so I copy your code in the right @media of my CSS nothing happened. In fact, I changed “background:red;” to “background-color:yellow;” to see if the issue was related with my menu background, but no changes.

    However, if I change the “content” to any character or simply left it void (content: “”;) a white line appears, but that’s like the “border” solution. The line is as higher as the menu bar, not only the “line-height”.

    Thank you

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This is why we need to see your site, as we cannot understand why something that works for the 2017 demo doesn’t work on your menu.

    If you cannot show us your site you need to emulate it through a tool like jsFiddle or CSSDesk.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to insert pipeline between each menu item’ is closed to new replies.