I've been working for several days to figure out how the mobile menu operates. I attempted to assign modules with the off-canvas position to various menus, but nothing seems to work.

While examining the default.php, I found the following lines:

<div id="gkMobileMenu"<?php if($this->API->get('menu_type', 'off-canvas') === 'off-canvas') : ?> class="off-canvas"<?php endif; ?>>
<span id="static-aside-menu-toggler" class="fas fa-bars"><span class="element-invisible">static-aside-menu-toggler</span></span>
</div>

<?php if($this->API->get('menu_type', 'off-canvas') === 'off-canvas') : ?>
<i id="close-menu">&times;</i>
<nav id="aside-menu">
<div>
<?php if($this->API->modules('menu_top')) : ?>
<div id="gk-menu-top">
<jdoc:include type="modules" name="menu_top" style="none" />
</div>
<?php endif; ?>
<?php
$this->asidemenu->loadMenu($this->API->get('menu_name','mainmenu'));
$this->asidemenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
?>
<?php if($this->API->modules('menu_bottom')) : ?>
<div id="gk-menu-bottom">
<jdoc:include type="modules" name="menu_bottom" style="none" />
</div>
<?php endif; ?>
</div>
</nav>
<?php endif; ?>

From what I can tell, this seems to be the code handling the mobile menu. When I inspect the HTML, I see:

<nav id="aside-menu" class="menu-open">
<div class="aside-menu-inner">
<div class="aside-menu-wrap">
<div class="gkAsideMenu">
<ul class="gkmenu level0">
<li class="first"><a href="http://mysite.com/ class="first">Home</a></li>
</ul>
</div>
<div class="gkAsideMenu">
<ul class="gkmenu level0">
<li class="first"><a href="http://mysite.com/" class="first">Home</a></li>
</ul>
</div>
</div>
</div>
</nav>

Currently, only "Home" appears as a menu item. How can I get the mobile menu to display the same items as the desktop version? Any advice would be greatly appreciated.

Thanks!

    Hi

    GK Royal is one of our premium templates but I don't see the active subscription under your profile. If you use another account to purchase our product, please login with that account.

    Thank you!

    5 months later

    saqrio It looks like your mobile menu is only displaying "Home" instead of the full desktop menu. Here are a few things to check and try:

    1. Check the Menu Assignment in Joomla

    • Go to Extensions > Modules and find the modules assigned to "off-canvas" or "menu_top".
    • Ensure the correct menu is assigned in Menu Module settings.
    • Check if the module is assigned to "All Pages" instead of just the homepage.

    2. Verify Menu Type in default.php
    Your code snippet includes this check:

    $this->asidemenu->loadMenu($this->API->get('menu_name','mainmenu'));
    $this->asidemenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));

    • The function loadMenu($this->API->get('menu_name','mainmenu')) ensures the correct menu is loaded.
    • Check if 'menu_name' in template settings is correctly set to 'mainmenu'.

    3. Compare Desktop and Mobile Menu Settings

    • Go to Menus > Manage and check if "Mobile Menu" and "Desktop Menu" are pulling from the same source.
    • If not, manually assign the same menu to both.

    4. Inspect JavaScript Behavior

    • Open Developer Tools (F12 > Console) and check for JavaScript errors.
    • Some templates use JavaScript to manipulate mobile menu behavior.

    5. Manually Force the Menu in PHP
    If the issue persists, try manually setting the menu:

    $this->asidemenu->loadMenu('mainmenu');
    $this->asidemenu->genMenu(0, -1);
    This ensures it directly loads mainmenu.

    6. Check CSS for Visibility Issues

    • Sometimes CSS hides certain elements for mobile.
    • Inspect #aside-menu and gkAsideMenu in Developer Tools (F12 > Elements) to ensure items are not hidden via display: none;.

    Let me know what you find!

      Write a Reply...
      You need to Login to view replies.