hover menu border bottom disappears

as long as i login to wordpress hover menu border bottom appears but the moment i logged out and check menu hover border bottom disappears. below is my css code any solution for it now

.customize-support .navbar-v1 .navbar-nav > li > a:hover {
     opacity: 1;
}
.customize-support .navbar-v1 .navbar-nav > li > a::after{
    transition: 300ms;
    height: 3px;
    content: "";
    position: absolute;
   background-color: #0099cc;
    width: 0%;
    bottom: 10px;
    display:flex;   
}
.customize-support .navbar-v1 .navbar-nav > li > a:hover::after{
width:65%;
display:block;
}

you can also see attached image below

enter image description here

Answer

I suspect its cause the classname .customize-support is only applied if you are logged in… a possible fix would be to remove it in your css like below making the css work in both cases (logged-in and logged-out):

.navbar-v1 .navbar-nav > li > a:hover {
    opacity: 1;
}
.navbar-v1 .navbar-nav > li > a::after{
    transition: 300ms;
    height: 3px;
    content: "";
    position: absolute;
    background-color: #0099cc;
    width: 0%;
    bottom: 10px;
    display:flex;   
}
.navbar-v1 .navbar-nav > li > a:hover::after{
    width:65%;
    display:block;
}

UPDATE 2

To keep the underline on the parent menu item when active:

Update this:

.navbar-v1 .navbar-nav > li > a:hover::after, {
    width: 65%;
    display: block;
}

To this:

.navbar-v1 .navbar-nav > li > a:hover::after,
.navbar-v1 .navbar-nav > li.current-menu-parent > a::after {
    width: 65%;
    display: block;
}

Leave a Reply

Your email address will not be published. Required fields are marked *