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

Home Forums Support How to remove the invisible separator from “hover underline”

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1321583
    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!

    #1321769
    David
    Staff
    Customer Support

    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;
    }
    #1357356
    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

    #1357558
    David
    Staff
    Customer Support

    Try adding this CSS:

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

    OK great that works – thank you!

    #1358750
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.