SOLVED Combine main menu and top menu in mobile menu
-
-
- eRimkus
- Sr. Rocketeer
- Posts: 168
- Thanks: 2
-
Is it possible to combine the top menu items with the main menu items in only the view of the menu that shows up at mobile widths?
Would it be something like include the top menu items in the main menu and include "visible-phone" somehow on those items and have hidden-phone set in the module class suffix for the top menu module for normal view?
www.domain.com
Gantry 4.1.17
Joomla 3.1.5
TIA - Last Edit: 11 years 1 month ago by eRimkus.
-
-
-
- Who?
- Preeminent Rocketeer
- Posts: 25562
- Thanks: 613
- Joomla freelancer
- I am afraid you can't combine two different menus into one because mobile menu uses the same main menu defined in the template configuration
- Check my services at: Mihha-Vision
-
-
-
- eRimkus
- Sr. Rocketeer
- Posts: 168
- Thanks: 2
-
Reggie Simmons guided me to the following solution:
/*Large*/
@media only screen and (min-width: 1200px) {
div#rt-header ul.gf-menu li.item238 {
display: none;
}
}
/*Desktops*/
@media only screen and (min-width: 960px) and (max-width: 1199px) {
div#rt-header ul.gf-menu li.item238 {
display: none;
}
}
/*Tablet*/
@media (min-width: 768px) and (max-width: 959px) {
div#rt-header ul.gf-menu li.item238 {
display: none;
}
}
Where "item238" is the id for the menu item I wanted to not be visible when the website is larger than phone size. The "display: none" makes them hidden at those larger widths.
I put the menu items in both the top menu and main menu with this code in the custom css file and have the top menu hidden when the website is viewed with a phone.
So the effect is, the top menu items get combined with the main menu when viewed with a phone. Cool!
Thanks to Reggie Simmons and Igor Mihaljko
-
-
-
- paxman
- Rocketeer
- Posts: 50
- Thanks: 0
-
But the main menu specified in the Gantry template manager can't be overridden, correct? I'm trying to hide the main menu for mobile visitors (and exchange it for another one), but I can't find any work around for this.
What you are trying to do here... can't this be done much easier by using responsive support classes?
www.rockettheme.com/docs/joomla/basic/re...e_support_classes.md
-
-
-
- eRimkus
- Sr. Rocketeer
- Posts: 168
- Thanks: 2
-
Yes, if I wanted to hide the entire menu, but what I was doing here was hiding just one item out of the entire menu. I had a top menu I did not want to show in the mobile view, but had one item I needed for the mobile view so I included it in the main menu for mobile view. I did not want it to display in the main menu for tablet and larger. Does that make sense?
I could have combined the CSS like so:
/*Do not display in Tablet and larger*/ @media (min-width: 768px) { div#rt-header ul.gf-menu li.item238 { display: none; } }
-
-
-
- paxman
- Rocketeer
- Posts: 50
- Thanks: 0
- OH! Now I understand. So I think I can also use this approach. I want to hide all the sub-menu items from my main menu ONLY when viewed on a phone. Great. Thanks so much.
-
-
-
- paxman
- Rocketeer
- Posts: 50
- Thanks: 0
-
Doesn't seem to be working...
/*Hide Menu Items on Phone*/
@media (max-width: 767px) {
div#rt-header ul.gf-menu li.item253 {
display: none;
}
div#rt-header ul.gf-menu li.item114 {
display: none;
}
..
}
*dots being the additional menu items i don't want to show.
Unless you can see what I am doing wrong I guess I will open a new thread and see if any of the experts can help me. Thanks again for your help.
-
-
-
- paxman
- Rocketeer
- Posts: 50
- Thanks: 0
-
www.asiaclubzone.com
As you can see with the main menu, there are a large number of sub-menu items, and in fact the menu is just too long when opened on a phone. That's why i want to remove almost all sub-menu items (for phone only). Even with the "Selectbox" setting, the menu is still too long on phones. Thanks for any help you can give.
-
Time to create page: 0.060 seconds