Change style of mobile menu

The menu of this theme looks different when viewed on different systems (iPhone, Samsung etc.). On iPhone it is even to complex to see what level a menu-item is. Is it possible to change this to a more simple menu type.

Hi

Template is using a simple select dropdown element, so it's look depends how browser's developers has designed it.

Hi Teitbite,

that was my question... how can I change the look?

Unfortunately... no answer.
Let me ask in a different way....
Is there a way to style it with CSS or in which module-position should I place a responsive menu module to replace the main menu?

Hi

There is no module position for menu in our templates. Menu is predefined and build into template. So You have 2 options:

1. Change css in /css/menu.css
2. Replace our menu with module position and use 3rd party menu. To do so edit file /layout/default.php and replace this:

Code: Select all

                 <?php if($this->API->get('show_menu', 1)) : ?>
                 <div id="gkMainMenu" <?php echo $this->API->get('menu_type', 'classic') == 'overlay' ? 'class="gkMenuOverlay"' : 'class="gkMenuClassic"'; ?>>
                         <?php
                       $this->mainmenu->loadMenu($this->API->get('menu_name','mainmenu'));
                        $this->mainmenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                    ?>
                 </div>
                 <?php endif; ?>
                 
                 <?php if($this->API->get('show_menu', 1)) : ?>
                 <div id="gkMobileMenu" class="gkPage"> <i id="mobile-menu-toggler" class="fa fa-bars"></i>
                     <label for="mobileMenu"><?php echo JText::_('TPL_GK_LANG_MOBILE_MENU_LABEL'); ?></label>
                     <select name="mobileMenu" id="mobileMenu" onChange="window.location.href=this.value;">
                         <?php
                           $this->mobilemenu->loadMenu($this->API->get('menu_name','mainmenu'));
                           $this->mobilemenu->genMenu($this->API->get('startlevel', 0), $this->API->get('endlevel',-1));
                       ?>
                     </select>
                 </div>
                 <?php endif; ?>


with

Code: Select all

            <?php if($this->API->modules('mainmenu')) : ?>
            <div id="gkMainMenu">
               <jdoc:include type="modules" name="mainmenu" style="<?php echo $this->module_styles['mainmenu']; ?>" />
            </div>
            <?php endif; ?>


than You will be able to use module position "mainmenu".

Replacing the code in this thread fixed the problem for me on laptop or desktop. BUT, if you resize the screen or open on a mobile device, there is no button for the menu. I'm guessing theres code for a mobile screen that needs to be adjusted? Where can I find this? Thanks

Hi

Yes, my solution removes our menu entirely and replaces it with a module position, so the menu You will use in it's place will need to come with a functionality of providing mobile menu. There is no way to remove the menu partially to still provide it for mobile devices.

Hi

Yes, my solution removes our menu entirely and replaces it with a module position, so the menu You will use in it's place will need to come with a functionality of providing mobile menu. There is no way to remove the menu partially to still provide it for mobile devices.

Thanks for the reply. Not sure why the module isn't showing up on mobile... if you go to http://lab.fxpathlete.com and resize the screen, you'll see that it disappears. The settings on the module are set to show on all devices, mobile, tablet, laptop, desktop. Any help/advice would be appreciated.

Hi

I can see this got fixed in this thread https://www.gavick.com/forums/storefron ... 03#p268503 already.

Since it's a duplication and we are going off topic, I'm closing this thread.