[Resolved] Line under menu bar inconsistent on different browsers

[Jonathan]

I installed Mellow from the Site Library, as I love the line under the navigation menu that highlights each item.

However, the thicker highlighted portion appears differently in Safari than in Chrome and Firefox. In the latter two, it is white. In Safari–on mac as well as iPad and iPhone–it turns an ugly gray.

I haven’t messed with the additional CSS that was loaded with Mellow except to make the line slightly thicker.

Thanks for any help!

[David]

Hi there,

odd – Safari seems to be grabbing the wrong link color. To get round that look for this CSS in Customizer > Additional CSS:

.main-navigation .main-nav>ul>li:hover>a,
.main-navigation .main-nav>ul>li.sfHover>a,
.main-navigation .main-nav>ul>li[class*="current-menu-"]>a {
    border-color: inherit;
}

And change the border-color: inherit; to border-color: #ffffff; or whatever color you want the current and hover to be.

[Jonathan]

Thanks. That worked! In case anyone else has the problem, be advised I had to paste the CSS after the other .main-navigation items. When I pasted it at the end it had no effect. (Perhaps that was a laughable mistake—I’m not adept at the code.)

Thanks again!

[Author]

Posts