[Support request] side border on main menu.

[Jusung]

Hello.

I want to make side border on menu like thies

|a|b|c|d|e|

Can you help 🙂

[Fernando]

Hi Jusung,

Can you try adding this through Appearance > Customize > Additional CSS?:

div#primary-menu > ul > li:after {
    content: "";
    height: 16px;
    width: 1px;
    position: absolute;
    background-color: #000000;
    top: 50%;
    right: 0;
    transform: translate(-50%,-50%);
}

div#primary-menu > ul > li {
    position: relative;
}

div#primary-menu > ul > li:first-of-type:before {
    content: "";
    height: 16px;
    width: 1px;
    position: absolute;
    background-color: #000000;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
}

[Jusung]

it works. but as you can see, the tickness of border is different..

Can you make it the same? I think some border is applied two times and it could be why..?

[Fernando]

It’s odd. There’s no doubling in the structure, and they have the same widths.

Can you try this?:

@media(min-width: 1025px){
    div#primary-menu > ul > li:after {
    content: "";
    height: 16px;
    width: 0.5px;
    position: absolute;
    background-color: #000000;
    top: 50%;
    right: 0;
    transform: translate(-50%,-50%);
}

div#primary-menu > ul > li {
    position: relative;
}

div#primary-menu > ul > li:first-of-type:before {
    content: "";
    height: 16px;
    width: 0.5px;
    position: absolute;
    background-color: #000000;
    top: 50%;
    left: 0;
    transform: translate(-50%,-50%);
}
}

I tried changing the width.

[Jusung]

THanks it works now!

[Fernando]

You’re welcome, Jusung!

[Author]

Posts