Menu hover and clickability

  • Resolved Mariah Kohl

    (@marikyu14)


    5 years ago

    I’ve managed to get the desired font color and font hover color on my website. However, I noticed when I’m on a page, that page in the menu bar is highlighted in a dark grey rectangle. Is there a way to remove that and have the page I’m on be highlighted just by the blue hover text? I also noticed when I click on one of the pages in the menu bar, there is a white dotted rectangle outline if I move the mouse slightly. Can that be fixed?

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • Moderator James Huff

    (@macmanx)

    In Additional CSS in the Customizer, add this:

    .main-navigation ul li.current_page_item > a, .main-navigation ul li.current-menu-item > a, .main-navigation ul li.current_page_ancestor > a {
    background: #000;
    color: #009ee2;
}
    Thread Starter Mariah Kohl

    (@marikyu14)

    Thanks! It got rid of the dark grey. ?? When you looked at my site, did you notice the white dotted outline in the menu after clicking? I’m wondering if it’s just my server.

    fresatomica

    (@fresatomica)

    I do not see anything like what you mentioned. It might be something you see as an admin. Could you share a screenshot of what you see on your end?
    You can use an online tool for that such as https://snipboard.io/ and paste here the link.

    Thread Starter Mariah Kohl

    (@marikyu14)

    I logged out as admin and took a screenshot. It appears after I click a page from the menu bar. https://snipboard.io/PYsNAo.jpg

    Jarret

    (@jarretc)

    I think that is the focus outline you’re seeing, try this

    .main-navigation ul.nav-menu li a:focus {
	outline: none;
}
    Thread Starter Mariah Kohl

    (@marikyu14)

    That fixed it! Thanks! ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Menu hover and clickability’ is closed to new replies.