Customizing the icon menu?

Hi,

To expand or collapse the submenu items in mobile please add the necessary CSS to Quick CSS and Js code to functions.php file from this link http://pastebin.com/raw/ncACWHws

CSS code:

#mobile-advanced .hideSubmenu ul.sub-menu {
display:none;
}

.subMenuIcon {
display:inline-block;
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 99999;
    font-size: 20px;
    background: gold;
    min-width: 48px;
    min-height: 48px;
    line-height: 48px;
    text-align: center;
   cursor:pointer;
}
@media only screen and (min-width:767px){
.subMenuIcon { 
display:none!important;
}}

Js Code:

function ExpandSubmenuInMobile(){
?>
<script>
    jQuery(document).ready(function() {              
      var menuItem    = jQuery('li.menu-item-has-children'),
          subMenuIcon = jQuery('.subMenuIcon');      
      menuItem.each(function() {        
        jQuery(this).prepend( "<div class='subMenuIcon'>+</div>" );
        jQuery(this).addClass("hideSubmenu");  
      });      
      jQuery(document).on('click', '.subMenuIcon', function () {
        console.log('menu was clicked');
        jQuery(this).closest('li.menu-item-has-children').toggleClass("hideSubmenu");
      });      
    });
</script>
<?php
}
add_action('wp_footer', 'ExpandSubmenuInMobile');

Best regards,
Vinay

• This reply was modified 8 years ago by Vinay.