[Resolved] How to remove the invisible separator from “hover underline”

[John]

Hi there,

I am using the following CSS to center the logo on a site, while also adding the underscore on hover over the nav items.
How can I remove the invisible separator from also being underscored when moving the mouse over it.

/*Color Scheme - 
black: #1a2440;
white: #f3f3f3;
green: #4ead6d;
pastel blue: #a7c4c2;
turqoise: #59dbd2;
*/
.inside-header {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.header-widget {
	order: 10;
	overflow: visible;
}

.nav-float-right .header-widget {
	top: auto;
}

.nav-float-right .header-widget .widget {
	padding-bottom: 0;
}

.navigation-branding, .site-logo {
    position: absolute;
    top: 10px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 200;
}

#mobile-header .mobile-bar-items {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4;
	margin-left: auto;
}
#site-navigation {
	float: none;
	width: 100%;
}

.main-navigation:not(.slideout-navigation):not(.mobile-header-navigation) .main-nav > ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.main-navigation .menu-item-separator {
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
}

.main-navigation .menu-item-separator a {
	font-size: 0;
	background: transparent !important;
}

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
	display: none !important;
}
.main-navigation:not(.slideout-navigation) .main-nav {
    flex: 1;
}
.main-navigation.sticky-navigation-transition .navigation-branding img {
    height: 75px;
    padding-bottom: 25px;
    margin-bottom: 45px;
    padding-top: 1px;
    padding-bottom: 20px;
}
.post {
	padding-top: 50px;
}
.separate-containers .comments-area {
	padding: 10px 0px
}
.entry-header {
	text-align: center;
}
/* Menu underlining */

@media (min-width: 767px) {

.main-navigation .menu > .menu-item > a::after {
    content: "";
	position: relative;
	top: -15px;
	opacity: 1;
    display: block;
    width: 0;
    border-bottom: 3px solid white;
    background-color: currentColor;
    transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 80%;
    }

@media (max-width: 768px) {
	.inside-header>:not(:last-child):not(.main-navigation) {
		margin-bottom: 0;
        }
}

Many thanks!

[David]

Hi there,

try changing this CSS:

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
    display: none !important;
}

to

.slideout-navigation .menu-item-separator,
.main-navigation.toggled .menu-item-separator{
    display: none !important;
    pointer-events: none;
}

[John]

Hi David,

Sorry for the slow reply – this project was put on the backburner.
So I tried adding that css and added !important, but it has not affected any change.
Can you take a look at it again please?

Cheers!
John

[David]

Try adding this CSS:

.main-navigation .menu > .menu-item.menu-item-separator  > a:after {
    display: none;
}

[John]

OK great that works – thank you!

[David]

You’re welcome

[Author]

Posts