Top right menu (Hamburger) is not setup properly

[MBAbaba]

Hi, I have created separate menu for mobile displayed at top right of the page(hamburger) but when i tap on course type in that i get navigated to blank page(which i created for mega menu) instead of expansion of course category which shows courses just like in mega menu in desktop. Mobile menu: https://prnt.sc/zbji76 Page open up on tapping "Sample page" https://prnt.sc/zbjke7

[Ada]

Hi, Yes I replicated this issue on my setup also. When user is logged-in then in mobile menu this expand link is disabled but for non-logged-in user it's not. I'll create a trello card for it. For now I can give you custom css to hide plus icon for mobile menu or hide this icon for non-loggedin users .

[MBAbaba]

okay, when can i expect trello card ?

[Ada]

Hi, Mega menu are designed for desktop versions. on mobile it will not display correctly. So this issue can be fixed using code. Please install and activate wplms-customizer plugin . You can get this plugin from here https://wplms.io/support/knowledge-base/wplms-customizer-plugin/ Then goto plugin editor>> wplms-customizer>>wplms-customizer.php and add this code

function hide_plus_icon(){
  if(!is_user_logged_in()){
    ?>
    <style>
    .sidemenu li.menu-item-has-children:after {
    display:none !important;
     </style>
   }
    <?php
  
  }
  }
  add_action('wp_head','hide_plus_icon');

[MBAbaba]

Hi Ada, The issue is still there, even after installing the plugin and putting code in it.

[Ada]

Hi, Yes I found it. Please remove the code shared by me. Mega menu display as submenu for mobile view. So you need to hide it using custom css. Add this code in appearance>> customize>> custom css I am giving code for the current order of menu items in your main menu.

@media(max-width:800px){
    .sidemenu li:nth-child(2) ul.sub-menu{
    display:none !important;
}
.sidemenu li:nth-child(2):after {
    display:none !important;

   }
}

This is code for the scenario where you put your mega menu as 2nd menu item (nth child 2) https://prntscr.com/zlo27o . So if you change the order then please change the number here in code.

[MBAbaba]

I am a bit confuse, so as per you for mobile drop down from menu is not working in new version of WPLMS, instead on tapping Courses, user directly navigates to course directory page, Is it so ? Because i was expecting to see drop down for mobile screen also as i set up mobile menu like this https://prnt.sc/zpig0p With you current code, user directly navigates to course directory page when it taps on course option.

[Ada]

Hi, Yes if you set course category as megamenu then it would not show as submenu for mobile view because Mega menu is different than submenu. It needs larger space to be displayed clearly. If you want to show category drop down for mobile menu then create a seperate menu for mobile menu and there create different pages with different course category like this https://drive.google.com/file/d/1uQhV60TxYVnHi2T_iKlnwKLIrQbV7cju/view Now Add them as submenu of all courses. refer here https://prntscr.com/zq0bxk This way you also do not need code shared by me.

[MBAbaba]

Okay Thanks.

[Ada]

My pleasure. Closing this topic.

[Author]

Posts