[Resolved] Line under menu bar inconsistent on different browsers

Home Forums Support [Resolved] Line under menu bar inconsistent on different browsers

Home Forums Support Line under menu bar inconsistent on different browsers

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

    GeneratePress 2.2.2
    GP Premium 1.8.1
    #880566
    David
    Staff
    Customer Support

    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.

    #880585
    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.