Hover color “bottom row” menu

  • The hover color works when the menu is in the header to the right of the site logo/icon. But when I enable the format that puts the menu in the “bottom row” directly under the header, then the menu items do not use the hover color when I hover. Do I need custom CSS for creating a hover color in the “bottom row” bar? Thank you.

    I tried this:

    .bottom-header-row, .bottom-header-row .header-contact a, .bottom-header-row #mainnav .menu a:hover {
    color: #b1b4b3;
    }

    • This topic was modified 1 year, 3 months ago by SJBaily.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • Hi @sjbaily,

    The color option you are looking for should be located under Appearance > Customize > Header > Main Header > Style tab > Menu items hover.

    https://i.snipboard.io/QKIx3Y.jpg

    Thread Starter SJBaily

    (@sjbaily)

    Thanks, but as I mentioned in my original post that hover style ONLY works when the menu is in the top of the header, next to the logo. It does not work when the menu is in the bottom row bar BENEATH the header.

    Thread Starter SJBaily

    (@sjbaily)

    I am trying to be clear. I can change the hover color and it works fine when the menu items are up in the top of the header. But when I use the format with the menu items in the bottom row bar, the color is not changing with hover.

    Thread Starter SJBaily

    (@sjbaily)

    I couldn’t get it to work until I added the “important” tag, so something somewhere is styling the hover in the bottom header row bar.

    This worked:

    .bottom-header-row, #mainnav .menu a:hover {
    color: #b1b4b3 !important;
    }

    following this for solution

    Thread Starter SJBaily

    (@sjbaily)

    Hi @letusnotbeweary May be a long wait here. No help, at least for me. So I used an old hack and just put the CSS mentioned above in the appearance section that lets you put in your own code. It worked fine. I can’t figure out where it is getting styled from or not getting styled from because the solution that @kharisblank gave does not work for beneath the header. Anyway, my logo looked better on the left so I no longer have a problem, but if you do, then use this:

    .bottom-header-row, #mainnav .menu a:hover {
    color: #b1b4b3 !important;
    }

    thanks so much sjbailey!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Hover color “bottom row” menu’ is closed to new replies.