Archived topic

sidebar nav menu evenly space horizontal lines for sub menu

5 replies · Started by Stephen on July 1, 2022

Viewing posts 1–6 of 6

July 1, 2022 at 2:38 pm #2270687

Hi, I've used the CSS below to add a horizontal line between menu items in sidebar.

Works great except the sub menu items mess up the line spacing.

If I make sub menu items not sub then lines are OK but I prefer to have them sub menu to keep indented.

How can I get evenly spaced lines between all menu items including sub menu please ?

.sidebar .widget_nav_menu ul li {
border-bottom: 1px solid lightgray;

padding-bottom:10px;
padding-top:10px;
}

July 1, 2022 at 4:09 pm #2270710

Hi Stephen,

I don't really see a good way to do that.

What if we only apply the CSS to parent menu items like this?

.sidebar .widget_nav_menu ul:not(.sub-menu) > li {
    border-bottom: 1px solid lightgray;
    padding-bottom: 10px;
    padding-top: 10px;
}

July 2, 2022 at 5:05 am #2271039

Hi, no I prefer evenly spaced lines.

If I set the menu so there is no sub menu items can I use CSS to indent some of the menu items ?

July 2, 2022 at 6:57 am #2271092

Hi there,

remove your CSS and add this:

.sidebar .widget_nav_menu ul li {
    margin-bottom: 0;
}
.sidebar .widget_nav_menu ul li a {
    display: block;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-bottom: 1px solid lightgray;
}

if you wand the sub menu borders to span the width of the parent items then add this too:

.sidebar .widget_nav_menu ul.sub-menu  {
    margin-left: 0;
    
}
.sidebar .widget_nav_menu ul.sub-menu li a {
    padding-left: 1em;
}

July 2, 2022 at 7:22 am #2271110

Thats amazing - Thank you 👍

July 2, 2022 at 7:46 am #2271128

You're welcome

This archived topic is closed to new replies.

Start building better websites today.