Styling menu items

Support
#1

Hi,
Please how can i insert vertical lines between menu items as shown in the image attached. Thanks.

#2

Hi @Teeebest,

It can be done with the CSS code. But we need to have the exact URL of the page containing the cmenu items so that we can check the case and give you a correct CSS code suggestion.

The idea is that you can use the ::after psudo-class feature of the CSS to add extra vertical line after each menu item. Something like this:

If you get back to us with the URL of the website we can give you proper code.

Thank you.

#3

Hello.
Thanks for the response. I want to separate the menu items with a vertical line.

The url is https://yumerique.com.

I also want to remove the circular background of the social icons please.

Thanks.

#4

Hi There,

That circle around the social icons is a box-shadow please inspect your Social element and set all the box-shadow values to 0 or set the color to transparent.



The menu items separator (vertical lines) can be achieved by applying a right-border to the top links. Please inspect your Navigation Inline element and under the Top Links tab, configure the border like this:



Feel free to adjust the style, width and color value where you see it fits.

Cheers!

#5

Hello,
Thanks for the response. Please is there a way to make the vertical line float as shown in the attached image?

Thanks

#6

Hello There,

To achieve what you want, please make use of this code instead:

.x-menu > li {
    position: relative;
}

.x-menu > li:before {
    content: "";
    width: 1px;
    height: 20px;
    background-color: red;

    position: absolute;
    top: 40%;
    left: 0;
}

.x-menu > li:first-child:before,
.x-menu > li:nth-child(1):before {
    display: none;
}

We would loved to know if this has work for you. Thank you.

#7

It worked perfectly. I am grateful.

#8

We are delighted to assist you with this.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.