a:active – current page menu active link

  • emkej777

    (@emkej777)


    1 year ago

    Hello,

    I would like to customize my menu on mobile and on PC version. The problem is that the global color of the theme affects active links at the menu and I cannot find the way how to change it.
    I used for example for “Kontakt” in main menu this code and it works! After hover it becomes yellow.

    .menu-item-18309 a:hover {
        color: yellow !important;
    }

    But the problem is with a:active. When I implement this code, it does not work at all. I even added opacity for 1.

    .menu-item-18309 a:active {
       color: red !important;
       opacity: 1 !important;
    }

    In general my goal is to change the color of every active link at the menu on PC version and also mobile version, but I cannot find any solution which may work.

    Before I used another code, which is:

    .current-menu-item > a {
       color:red !important;
    }

    That one in general works, but… when I open mobile version and then open dropdown mobile menu, then it does not work for those categories at the mobile menu, which are as a second category of the menu. And I cannot find the way how to customize it. Does anyone have any idea?

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Manuel Camargo

    (@sirlouen)

    1 year ago

    This seems to be a very specific question aimed at Elementor behaviour. Probably you will find better answers in the Elementor communities, as this is not a specific problem of WordPress itself, and not everyone in WordPress use Elementor.

    Dillon Lanier

    (@dillonlanier)

    1 year ago

    Hi @emkej777 happy to try and help you figure this out.

    First thing, if you haven’t checked out the theme docs for Vehica you should start there:
    https://support.vehica.com/support/solutions/articles/101000376550-how-to-customize-header-menu-colors-font-size-etc-.

    Next, I would recommend looking at your Elementor header template and seeing if you can customize the active/ hover colors that way.
    https://elementor.com/help/change-link-color/

    If you go the custom CSS route you should use the .current-menu-item class as well as the .current-menu-parent to style the parent menu item. I think this CSS would work:
    .current-menu-parent > a, .current-menu-item > a {
    color: red !important;
    }

    Edit: adding mobile comments.

    Mobile is not working because there is CSS overriding the customization. If you use the inspector tool you will be able to see this for yourself. To brute force through this I think all you need to do is add this super long selector to the above CSS:
    .vehica-mobile-menu__wrapper .vehica-mobile-menu__open .vehica-menu > .menu-item .current-menu-item .vehica-menu__link

    Moderator threadi

    (@threadi)

    1 year ago

    The problem is that the global color of the theme affects active links at the menu and I cannot find the way how to change it.

    Which color should it be? Actually its red on active.

    Thread Starter emkej777

    (@emkej777)

    11 months, 2 weeks ago

    guys – thansk a lot for help! I implemented your tips and now everything works perfect! thanks once again!

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

The topic ‘a:active – current page menu active link’ is closed to new replies.

Tags