Clicked menu link retaining selection colour after click

  • Resolved flash68

    (@flash68)


    7 years, 1 month ago

    If I click a menu option, the hover colour is retained while the selected page is loaded. Because my hover and selected colour are the same, it looks like 2 menu options are selected until the new page is loaded. If you move off the menu item after clicking the hover state is removed correctly.
    However on mobile view (with the drop down menu), when viewed on a mobile, the current active page is coloured plus the new one clicked on until the new page is loaded. E.g. if you are on ‘About Us’ page – so the ‘About Us’ option is coloured blue, then click ‘Contact’, both are coloured blue until the new page loads.
    Is there a way to make the clicked option active immediately on click and clear the current page’s active class?

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

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

  • Hi @flash68,

    Try this css

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #3498db !important;
}
    Thread Starter flash68

    (@flash68)

    Hi Rajan V,
    Thank you so much for you solution. It still left both the hovered and active links blue but adding a line before just to make all links white did the trick.
    Thanks again

    .navbar-nav a {
    color: #fff !important;
    }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
    color: #3498db !important;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Clicked menu link retaining selection colour after click’ is closed to new replies.