Archived topic

Line under menu bar inconsistent on different browsers

2 replies · Started by Jonathan on April 26, 2019

Viewing posts 1–3 of 3

April 26, 2019 at 7:51 am #880545

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!

April 26, 2019 at 8:19 am #880566

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.

April 26, 2019 at 8:42 am #880585

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!

This archived topic is closed to new replies.

Start building better websites today.