Menu entry text and hover underline color

@aailweb Try adding this to your Custom CSS:

#topmenu ul.menu>li:after, #frontsidebar .widget_nav_menu ul.menu>li:after {
    background-color: #000!important;
    width: 70%;
}

Many thanks, but adding the suggested CSS code

#topmenu ul.menu>li:after, #frontsidebar .widget_nav_menu ul.menu>li:after{background-color: #000!important;
width: 70%;}

I reached the opposite: while hovering, black undeline on white menu entry text in the front page and white underline on black menu entry text in the selected page (before adding the CSS code the undeline was always white).

I would need to have the hovering undeline black color in the menu (when hovered) only when I am in a page different from the front page (where the menu entry text is black).

I’ve set

– front page menu text color: white
– selected page menu text color: black

and have hover text underline color always white (in front page menu and in selected page menu).

I would like to have the hover text underline color black only when I am in a page different from the front page. May you kindly help me?

Can you try adding this custom css instead:

.not_frontpage #topmenu ul.menu>li:hover:after{
    background-color: #000!important;
    width: 70%;
}

Regards

No, hover text underline color in selected page (not frontpage) stays white.

I guess you are trying to add an “active” state for the menu with a black bottom border. If so, try adding this:

.not_frontpage #topmenu ul.menu>li.current-menu-item:after{
    background-color: #000!important;
    width: 70%;
}

Regards

Thank you, but none of the three versions of CSS code meets my need.

I have menu entries text white in the front page and black in every other selected page, and would like to have the nenu text underline color (when hovering the menu entry with the mouse pointer) equal to the text color, but I have it always white.

Hi

Insert this in Appearance -> Customize -> Miscellaneous -> Custom CSS

#topmenu ul.menu>li:hover:after {
    background-color: #607D8B;
}

Thanks

Thank you (always kind and prompt) but even this last version of CSS code doesn’t turn to black the hovering underscore of menu text in pages different from front page.

Hi

Have you pasted the css code in Custom CSS field? I’m not seeing the css in your websites source.

Thanks

I removed it because it didn’t work. Now I added it again as you required.

#topmenu ul.menu>li:hover:after{background-color: #607D8B;}

And here all the custom CSS code added:

/* Head Inner */
.head_inner{padding-bottom: 20px;}
/* Site Title and Tagline */
.logo h1 a, .logo h2 a{font-weight: 500; text-transform: uppercase; line-height: 0;}
span.desc{font-size: 20px; font-weight: 600; text-transform: uppercase; opacity: 1; line-height: 0;}
/* Menu Frontpage */
#topmenu ul li a{font-weight: 700;}
/* Menu Not Frontpage */
#topmenu ul.menu>li:hover:after{background-color: #607D8B;}
/* Frontpage Slider Text */
.stat_content_inner{font-size: 125%;}
/* About Widgets */
.about_pre{}
.about_header{font-size: 48px; font-weight: 700;}
.aboutblock {padding-top: 60px; padding-bottom: 20px;}
/* Blocks Widgets */
.midrow_block h3{font-size: 1.1em}
/* Page Header */
.page_head{min-height: 0px;}
.page_head h1, .page_head a{font-weight: 600; font-size: 34px;}
#content {margin-top: -60px;}
/* Footer Widgets */
#footer .widgets {padding: 0px 0px;}
/* Footer Copyright */
.copytext{line-height: 1em;}

Thank you very much

Hi

It is converting the > to HTML character entities. Can you please install this plugin and insert the custom css here.

https://www.ads-software.com/plugins/simple-custom-css/

#topmenu ul.menu>li:hover:after {
    background-color: #607D8B;
}

Thanks

Done… installed Simple Custom CSS, added CSS code and removed “#topmenu ul.menu>li:hover:after{background-color: #607D8B;}” in theme custom CSS code. But it seems not to work.

Any idea about how solving my issue?

May I have a solution for the problem I reported?