Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 5, 2019 at 2:59 am #1087275
    webworm72

    I am using the “Full Width Sub Menu” element at the bottom of all the pages of my website. you can view website logins in the private section.
    I have searched everywhere for a solution to have the menu item font to change to the color white , when that page is active.
    I found the code below , it highlights the background in white when on active page, so that’s close to what I need.
    However all I want is the text to change to white, not the background when users navigate to that page and it’s active page.

    Basically the same way it works with the main menu system,

    Code below makes background white when active. I want only the text to be white and background stays the same color when on active page.
    ===================================
    #top .av-subnav-menu > li.current-menu-item {
    background-color: white;
    border-bottom: 4px solid #ffffff;
    }
    =====================================

    April 7, 2019 at 5:15 am #1087879
    Mike

    Hey webworm72,
    Sorry for the late reply, I took a look at your page, and it seems that you have found the solution to this because when I check your menu items:
    accounting, information technology, operations, & procedurment
    they are white when on the current item page.
    Please let us know if there is anything else we can help with,
    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    April 7, 2019 at 8:04 pm #1088028
    webworm72

    Hi Mike thanks for taking a look.
    Yes the main top menu works fine. I am talking about the “Full Width Sub Menu” I am using at the bottom of each page.

    April 7, 2019 at 9:43 pm #1088047
    Mike

    Hi,
    Oh, I’m sorry I missed that.
    OK, I see it’s a mess :) To make the current menu item white and for the menu item to be white on hover,
    Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top #sub_menu1 .av-subnav-menu > li.current_page_item {
background-color: #75253e !important;
border-bottom: 0px solid #75253e !important; 
padding: 0px !important;
}
#top #sub_menu1 .av-subnav-menu > li.current_page_item > a,#top #sub_menu1 .av-subnav-menu > li > a:hover {
color: #fff !important;
}

    Best regards,
    Mike

    April 7, 2019 at 10:42 pm #1088057
    webworm72

    Perfect thanks Mike ! , you can close this one !

    April 8, 2019 at 3:57 pm #1088356
    Jordan Shannon

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘How to have the menu item change color when active Using Full Width Sub Menu’ is closed to new replies.