How can I make a menu with a slash "/" as separator between menu choices and preferable not included in the link?

Like this: "Home / About / Services / Contact".

I tried this additional CSS:

ul.menu.m-header-default-menu li.menu-item:before { content: "/"; padding: 0 .75em; }
ul.menu.m-header-default-menu li.menu-item:first-child:before { content: ""; padding: 0; }

ul.menu.m-header-default-menu li.menu-item {
margin-left: 0;
}

But the slashes gets smaller on the height and aligned at top. Looks ugly.

Thanks!

No :-) its currently a underline mouse over so the slash will also be underlined on mouse over. I don't want that.

I'm using this CSS now:

ul.menu li.menu-item:before { content: "/"; padding: 0 .6em 0 .4em; font-size: 1.8rem; color: #000000; }
ul.menu li.menu-item:first-child:before { content: ""; padding: 0; }
ul.menu li.menu-item { margin-left: 0; }

The mouse over underline is something I'm also wondering about where is it set. Can not find it in the header template settings. How to change the default mouse over?

Thanks!

So thats not editable with customizer or Elementor in the header template?

Did not work for me:

ul.menu li.menu-item > a:hover { -webkit-box-shadow: none !important; box-shadow: none !important;
}

I was actually looking for this CSS in the inspector previously but could not find anything that making this hover underline.

Thanks!

Sorry I can not get ride of the mouse over underline. And why is it on the logo as default?

And why is it not editable with customizer or Elementor header template?

Thanks!

Its gone on the logo but not on the menu.

Why can't this box shadow be change in Elementor?

Thanks!

Sorry don't work. I tried this one already. Its a bit different classes coz I'm using a header template.

ul.menu li.menu-item>a:hover {
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

Thanks!

Nope nothing happen.

The CSS for the logo worked.

Thanks!

How about attached image? But don't understand how to add a rule for this.

Thanks!

But I'm using a few other custom CSS rules and its working. In this case I can not even find the correct class that makes this hover box-shadow in the web inspector and try it out there temporarily.

The website is re-design.se. There is one portfolio added currently.

Thanks!

Sorry I already tried that one. It did not work for me.

It looks kind of messy in CSS in the inspector. Same classes/rules comes like three times.

Okay never mind. I leave this. There is more critical issue than this.

Thanks!

I found out which CSS makes the underline hover. Removing them in the web inspector its gone but adding them with none !important; in the additional CSS it has no effect.

.elementor-29571 .elementor-element.elementor-element-1f6b0b6d .m-nav-menu--horizontal ul > li:hover > a:not(.menu-item-icon) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.elementor-29571 .elementor-element.elementor-element-1f6b0b6d .m-nav-menu--horizontal ul > li:hover > a:not(.menu-item-icon) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.elementor-29571 .elementor-element.elementor-element-1f6b0b6d .m-nav-menu--horizontal ul > li:hover > a:not(.menu-item-icon) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.m-nav-menu--horizontal ul li.menu-item > a:hover {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.elementor a:hover, .elementor a.active {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
.elementor a:hover, .elementor a.active {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a:not(button):hover, a:not(button).active {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
a:not(button):hover, a:not(button).active {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Thanks!

If you use correct CSS it works. Don't need my WP login.

Since the original CSS rule already have !important it can not be overridden with !important. It have to be added with some element that has higher priority.

So this CSS works to take away the mouse over underline:

div .elementor-29571 .elementor-element.elementor-element-1f6b0b6d .m-nav-menu--horizontal ul > li:hover > a:not(.menu-item-icon) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
div .elementor-29571 .elementor-element.elementor-element-1f6b0b6d .m-nav-menu--horizontal ul > li:hover > a:not(.menu-item-icon) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
div .elementor-29571 .elementor-element.elementor-element-1f6b0b6d .m-nav-menu--horizontal ul > li:hover > a:not(.menu-item-icon) {
-webkit-box-shadow: none !important;
box-shadow: none !important;
}

Thanks!