Gantry responsive template mobile menu in different position
-
-
- Krachtstroom
- Newbie
- Posts: 19
- Thanks: 1
-
I use the latest Gantry template in responsive mode. My menu is in position sidebar-a. Obviously this is not very usefull for mobile devices, the button is visible at the top, but clicking on it will not show the menu, it is rendered down below where the responsive template places sidebar-a.
So I want the mobile menu to be in another position as the desktop menu. So far I can't find if it is possible and if yes, where to make some changes.
Anybody?
Regards,
Hans -
The following users have thanked you: Dan Walker
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Hans,
What you are wanting to do is not possible using the template menu as it only has one module position to place it. If you can use the template default menu, then you will need to code your CSS to move the mobile menu to the top using negative margins. While this is not ideal, it is the only solution if you are using the template default menu.
However, the best solution is to disable the template menu. If you don't have the RokNavMenu module installed, install it. Then create two RokNavMenu menu modules for your main menu. Assign one to your 'sidebar' position, assign classes ' visible-large visible-desktop' and possibly 'visible-tablet' to the module class. NOTE there is a space in front of the first declared class which is required - otherwise it will be appended onto the module class which is not desirable. Now assign the 2nd RokNavMenu module to the position you want it in for mobile devices (probably in one of the 'top' or 'header' positions) and assign classes ' visible-phone' and possibly 'visible-tablet' to the module. Be sure to set the Theme to either 'gantry-dropdown' or 'gantry-splitmenu' as those will be the ones that will display the mobile menu toggle button to provide you the functionality that you desire.
What this will do is display the menu in your sidebar position for desktop / laptops as well as tablets if you assign the 'visible-tablet' to that module but the other module will not be displayed. When the viewport is reduced for mobile devices, then the sidebar module is not display but the other module will be display for phones as well as tablets if so desired.
Also, if you don't like the 3 horizontal lines for your mobile toggle menu, go to this post and I have code for how to change that to a 'Menu' text. www.rockettheme.com/forum/index.php?f=48..._v=viewtopic#p988175
If you have any problems, post back here.
Luke - Just another old hacker!
-
-
-
- Krachtstroom
- Newbie
- Posts: 19
- Thanks: 1
-
Hello Luke,
Thank you for your answer. To be honest I already thought about such a solution but wanted to be sure that this couldn't be done easier.
I'm going to try this next week! Also thanks for the link to change the three menulines. I get compliants from my customers that they don't understand them...
Regards,
Hans
-
-
-
- Luke Douglas
- Hero Rocketeer
- Posts: 322
- Thanks: 15
- Another Old Hack!
-
Hans,
OK, I figured out how to accomplish what you want without disabling the template menu settings.
First, install the DJ Menu module: http://extensions.joomla.org/extensions/structure-a-navigation/menu-systems/drop-a-tab-menus/16232
Set it up to display in the position you want when in mobile view. In the Basic Options, ensure that the 'Display SELECT for small screens' is set to 'Yes'. Set the 'Small screen width' to '767' to match up with the Gantry classes.. Under Other Options, add ' visible-phone' to the 'Module Class Suffix' ensuring that you have a space " " in front of the 'visible-phone' text. If you viewed the site after adding this module, then in your phone display width, you should see the select-box menu where you assigned it.
However, we still have that Menu Toggle button appearing.
Hmmmm...here's the CSS code to hide it:
/* Smartphones */
@media (max-width: 480px) {
.gf-menu-toggle {
visibility: hidden;
background-color: #eeeeee !important;
}
}
/* Smartphones to Tablets */
@media (min-width: 481px) and (max-width: 767px) {
.gf-menu-toggle {
visibility: hidden;
background-color: #eeeeee !important;
}
}
This works great but it is a select box menu but I can live with that. :cheesy: - Just another old hacker!
-
Time to create page: 0.073 seconds