Support » Theme: Vantage » Menu Item with Custom Link Changes Colour when Clicked

  • Resolved lawriem1

    (@lawriem1)


    Hi
    On this website, when the menu item ‘ROYAL ARCH’ is clicked another page opens as required. However, on returning to the original page the menu item has a light blue background colour.
    Any help would be greatly appreciated.

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Hi Lawrie

    I think WP Fastest Cache might be changing the order of the CSS a bit. The light blue is the original hover color which is taking precedence over the settings color selected in the Customizer. One option might be to exclude the theme stylesheet from WPFC, its file path is /wp-content/themes/vantage/style.css. Alternatively, you could try the following in Custom CSS:

    main-navigation ul li:hover > a, .main-navigation ul li:focus > a, #search-icon #search-icon-icon:hover, #search-icon #search-icon-icon:focus {
        background-color: #002f77 !important;
    }

    Thanks for your reply Andrew. Unfortunately neither the custom CSS or excluding the style sheet in WP Fastest Cache helped. I also deactivated WP Fastest Cache but that had no effect either.

    Thanks. It might be Autoptimize, perhaps try adding /?ao_noptimize=1 to the URL to test. If that resolves the issue you could perhaps take a look at the AO settings and experiment a bit in the CSS section.

    No luck Andrew but I have narrowed it down to a conflict with the Open External Links in a New Window plugin, which I have now deactivated.

    Super, thanks for the update. I’ll get back to tomorrow for this issue and the NextGen question. Thanks for the wait.

    Please, try the following Custom CSS:

    .main-navigation ul li:hover > a, .main-navigation ul li.focus > a {
    	background: #002f77 !important;
    }

    Thanks

    Thanks Andrew
    When I return to the original page there is still a dotted line around the tab but the dots are very small and the colour issue has been resolved so I can live with that.
    Thanks again

    Glad to hear that helps. You can try:

    a {
       outline: 0;
    }

    Thanks Andrew. You put me on the right track. Perfect now.

    Super, glad to hear you’re making progress. Here is a reference post for that last change https://css-tricks.com/removing-the-dotted-outline/.

    Thanks again Andrew

    For info, to make it work I actually had to use
    .main-navigation ul li:hover > a, .main-navigation ul li.focus > a {
    outline: 0 !important;
    }

    But that’s probably just me 🙂 I don’t really understand this stuff!

    That looks perfect. You can’t cause a fatal error with CSS so you’re free to experiment.

    Cheers for now 🙂

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