Add fixed seperator/text to top-menu

Support
#1

Hello there,

I attached a image of what I’d like to add to my menu. It is a simple seperator, basically just the “|” symbol from the keyboard. I’d like to have this as a seperator after the “INFOS” entry, before the WPML Language switcher.

I can add a menu element and add # as link, but then I still can hover over the seperator-line and it is also visible in the mobile menu.

I hope you can help me with a solution. My site is www.soelvahof.com

#2

Hi There,

Please add this custom CSS under X > Theme Options > CSS:

li#menu-item-1893 a:after {
    content: "|";
    position:absolute;
    right: 0px;
}

Let us know how it goes!

#3

Thank you very much, it works. However, is it possible to add more space between the left and right menu element?

#4

HI There,

Please update the previous CSS a bit:

li#menu-item-1893 a:after {
    content: "|";
    position:absolute;
    right: 0px;
}
li#menu-item-1893 a {
    padding-right: 30px;
}
.wpml-ls-item a {
    padding-left: 30px !important;
}

Let us know how it goes!

#5

Thank you! But there are still some problems. The space is there now, but as you can see from the screenshots, not the dropdown for the language selector got some space at the beginning, and the other dropdown now have the separator at the end of every menu entry.

#6

Hi There,

Please update the previous CSS to this:

li#menu-item-1893 > a:after {
    content: "|";
    position:absolute;
    right: 0px;
}
li#menu-item-1893 > a {
    padding-right: 30px;
}
.wpml-ls-item > a {
    padding-left: 30px !important;
}

Let us know how it goes!

#7

First problem is gone now. Just the strange space in my language switcher dropdown is still persistent.

#8

Hello There,

To reduce the space in your language switcher, please make use of this code:

body .wpml-ls-item .sub-menu {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

body .wpml-ls-item .wpml-ls-item > a {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

Hope this helps. Please let us know how it goes.

#9

Thank you, it worked with some modifications to your code. I had to set it to padding-left instead of padding-top and padding-bottom.

Keep up that great work. :slight_smile:

#10

You’re welcome!
Thanks for letting us know that it has worked for you.

#11

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