Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • July 19, 2017 at 3:14 pm #824008
    L

    Hi,
    Is it possible to highlight the active element of the mobile menu? Which CSS selector can be used for this purpose?

    Visitors are trying to tap on the active element on mobile menu and it does not do anything. From the sake of a good UX it would be wise to highlight active elements that are corresponding to the actual page – like it is already done on desktop.

    Regards

    July 22, 2017 at 4:11 pm #827709
    Mike

    Hey L,
    Sorry, this feature has not been added yet, Please feel free to request – or vote if already requested – such feature on Enfold feature request form.

    Best regards,
    Mike

    July 22, 2017 at 7:32 pm #828454
    L

    I created a feature request but honestly, I highly doubt it will be considered as important for many users.
    Meanwhile – is there any possibility to do it by CSS? I inspected the code but could not find any active menu item class which I could use to change background color of the element.

    Regards

    July 24, 2017 at 3:32 am #828840
    Mike

    Hi,
    As of right now there in no active menu item class for the burger menu items.

    Best regards,
    Mike

    July 30, 2017 at 8:14 pm #831889
    ronjordan

    Hi,

    Please add following code to Child-Theme => Functions.php

    function add_custom_script(){
    ?>
    <script>
    jQuery(window).load(function(){
    jQuery(‘#avia-menu li.current_page_item a’).addClass(‘main-active-burger’);
    });
    </script>
    <?php
    }
    add_action(‘wp_footer’, ‘add_custom_script’);
    And
    #top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a.main-active-burger {
    color: #000;
    }

    Best regards,
    Ron

    July 30, 2017 at 9:38 pm #831907
    L

    Ron thanks a lot for sharing a good idea!

    There is one issue – the class main-active-burger in the function above gets added to all child elements also for those that are not opened. The following code lets to target child menu element that is actually active:

    Functions.php code:

    function add_custom_script(){
?>
<script>
jQuery(window).load(function(){
jQuery('#avia-menu ul.sub-menu li.current_page_item a').addClass('main-active-burger');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

    And for CSS I shortened the code a bit:

    #av-burger-menu-ul a .main-active-burger {
color: #000 !important;
}
    • This reply was modified 7 years, 4 months ago by L.
    August 2, 2017 at 7:08 am #833221
    Ismael

    Hi,

    Thank you for the info. Is it working as expected?

    Best regards,
    Ismael

    August 14, 2017 at 1:49 pm #838641
    L

    Hi Ismael,

    Not as good as it should be. Right now the class .main-active burger is added to all subchild menu elements, ignoring the fact that they are not active. If we have a website menu structure:
    Parent>Child>Subchild>…. this solution doesn’t work.

    I cannot figure out a way to pick only the active menu element. I like that the mobile menu is update has been considered but honestly, the mobile menu is still lacking a lot of logic features.

    Regards

    August 14, 2017 at 3:22 pm #838684
    Günter

    Hi,

    The problem you reported should be fixed with the next update.

    Meanwhile you have to update file enfold\js\avia.js. Please replace the complete content of this file with the RAW paste content of

    https://pastebin.com/MDPgab6X

    This link is valid for one week. Make sure to make a copy of the original file to have a fallback and that you are using Enfold 4.1.2.

    If you have problem we can do the update for you, please give us FTP access to your server.

    The fix adds the class current-menu-item and menu-item-[menu item id] to the li elements of the burger menu.
    If you need help with CSS let us know.

    Best regards,
    Günter

    August 14, 2017 at 11:08 pm #838991
    L

    Thanks Günter,
    The sample php worked and it did added the active menu item class for mobile menu.

    I am struggling to select ONLY the active menu element and give it a color. For now I have a following custom css, which selects all elements in active parent menu – parent, child and sub-child:

    #av-burger-menu-ul li.current-menu-item a {
	color: #8B0000 !important;
}

    What I would need to select is one menu item only – no matter if it is parent element, child element or sub-child.

    Best Regards

    August 16, 2017 at 5:50 pm #840016
    Günter

    Hi,

    Try the following CSS and adjust the values:

    
.av-burger-overlay-inner .current-menu-item > a:first-child{
          color: red !important;
          font-weight: 900;
}

    Best regards,
    Günter

    August 17, 2017 at 8:20 am #840290
    L

    Thank you Günter, that worked!

    Best Regards

    August 17, 2017 at 11:09 am #840334
    Günter

    Hi,

    Glad we could help you again.

    Enjoy the theme and feel free to come back with further questions and/or problems you have. Simply open a new thread.

    Best regards,
    Günter

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘New mobile menu – highlight active element’ is closed to new replies.