How add a vertical line between menu items?

  • Hi:

    Using the navigation block, is there a way – or best way – to add a vertical line between menu items:
    Home | About | Contact | Services | Gallery

    While the words should be linked, the vertical lines should not be linked. And spacing needs to be equal right and left of the vertical line. Is this doable with the native navigation block? Alternatively, is there some css style I could apply to each nav item?

    Thanks!


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

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator jordesign

    (@jordesign)

    Hi @vytaulla51 – there’s not really a native way to do that with the Navigation Block (yet). It should be possible to do something like with CSS – if you can share a URL to look at I’ll see what is possible.

    Thread Starter vytaulla51

    (@vytaulla51)

    paulawriter.com – simple nav, would like to add vertical lines between page names.

    Thanks!

    Moderator jordesign

    (@jordesign)

    Hey @vytulla51 you can try out this CSS to help:

    .wp-block-navigation {
    padding-top: 10px
}
.wp-block-navigation .wp-block-navigation-item {
    border-right: 1px solid;
    padding-right: 15px;
}
.wp-block-navigation .wp-block-navigation-item:last-child {
    border:none;
}

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How add a vertical line between menu items?’ is closed to new replies.