Hey guys,
I'm working on web page where the regular menu and the mobile menu are 2 separate entities (as opposed to the same menu markup styled differently with media queries). For this to work I've gotta call the jdoc:include modules once for the regular navbar and once for the mobile navbar.
In my custom template I've created an override folder for mod_menu where I've changed the mark up to suit my needs. My problem is that I need different markup for the mobile menu but the override I've got will be applied to all instances of the menu module.
Could someone please tell me how do I go about this? Is there an easy way to tell joomla that I want mod_menu_override_x to be used for one instance of the menu module and mod_menu_override_y to be used for the other one?
Your help would be much appreciated!
Cheers and thanks in advance!
Multiple template overrides for the same module
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sun Mar 15, 2015 11:44 pm
- Webdongle
- Joomla! Master
- Posts: 44018
- Joined: Sat Apr 05, 2008 9:58 pm
Re: Multiple template overrides for the same module
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
-
- Joomla! Fledgling
- Posts: 3
- Joined: Sun Jul 08, 2012 8:40 am
- Location: Thailand SIAM
- Contact:
Re: Multiple template overrides for the same module
Thanks for the info, I was studying my web problem .Webdongle wrote:https://www.siteground.com/tutorials/jo ... odules.htm
Last edited by toivo on Sun Apr 19, 2015 11:33 am, edited 1 time in total.
Reason: manual signature not allowed
Reason: manual signature not allowed
-
- Joomla! Fledgling
- Posts: 2
- Joined: Sun Mar 15, 2015 11:44 pm
Re: Multiple template overrides for the same module
Thanks for the reply but this video didn't answer my question. I know that you can add bootstrap classes to make components show and hide based on screen size. My issue is that I want to RENDER a menu in 2 different ways and the mod_menu override allows me to specify only one template/rendering code. Once the menu is rendered in 2 different ways and placed on the page using 2 separate jdoc:include calls, I'll set the correct media queries to make sure I show the right menu for the right resolution - that's the easy part.Webdongle wrote:https://www.siteground.com/tutorials/jo ... odules.htm
So far my only idea is to use the class suffix field in a menu module instance and then in the rendering code check the classes. If class X is found - render the menu in one way, if class Y is found - render the menu in a different way. I just wanted to check if that's the right way to do it or if there's a different, standard way to achieve this.
- Per Yngve Berg
- Joomla! Master
- Posts: 30809
- Joined: Mon Oct 27, 2008 9:27 pm
- Location: Romerike, Norway
- Webdongle
- Joomla! Master
- Posts: 44018
- Joined: Sat Apr 05, 2008 9:58 pm
Re: Multiple template overrides for the same module
No you use one module position and two modules for your main menurvpoff wrote:...
I'm working on web page where the regular menu and the mobile menu are 2 separate entities (as opposed to the same menu markup styled differently with media queries). For this to work I've gotta call the jdoc:include modules once for the regular navbar and once for the mobile navbar....
Module 1 hides the menu from mobiles
(space)ClassForNorMalmenu(space)hidden-phone
Module 2 hides the menu from Desktops and Tablets
(space)ClassForMobileMenu(space)hidden-desktop(space)hidden-tablet
But most developers use the css to display the 3 bars for mobile devices
Example of how to apply different css for the same class
N.B. same class ... so one module position with one class in the <div> and no module class override
Code: Select all
@media only screen and (min-width:960px){
/* styles for browsers larger than 960px; */
.nav-menu {
color:red;
}
}
@media only screen and (min-width:1440px){
/* styles for browsers larger than 1440px; */
.nav-menu {
color:green;
}
}
@media only screen and (min-width:2000px){
/* for sumo sized (mac) screens */
.nav-menu {
color:blue;
}
}
@media only screen and (max-device-width:480px){
/* styles for mobile browsers smaller than 480px; (iPhone) */
.nav-menu {
color:yellow;
}
}
@media only screen and (device-width:768px){
/* default iPad screens */
.nav-menu {
color:purple;
}
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
.nav-menu {
color:gold;
}
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".