Mobile friendly menus in Joomla

Olaf Berli
Olaf Berli used Ask the Experts™
on
I'm upgrading a website from Joomla 2.x to Joomla 3.x. One of the goals is to make the site more mobile friendly. I'm using a template called Lifestyle2 from Joomla Bamboo. Have made some adjustments to the fonts etc. on the template and it mostly works well. What doesn't work well is the menu on small devices. The menu collapses as it should for "mid size" screens, but when the screen size is reduced more, like when accessing from a mobile phone or small tablet, the menu gets unreadable. Happens when the menu turns into some lines and the word "Meny".

Question is: What can I do to make the menus work on small devices?

Site is at:  www.reverse-therapy.no

-Olaf-
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2004

Commented:
The file template.css on line 4178 is setting:
.navbar-collapse ul a { color:#eeeeee !important; }

Open in new window


You'll need to go back through and audit your media breakpoints.
Olaf BerliOwner

Author

Commented:
Steve Bink - thanks for your feedback.
Tried to fine where to change this setting and realize that my knowledge of the inner workings of Joomla is a bit limited. I found the template.css in two places:

css/template.css
and
css/themes/ocean/template.css

They seemed quite similar. The mentioned code was found in line 4200 in both files, but changing any of them didn't seem to influence the collapsed menu

As for changing the media breakpoints, this is also something that is slightly outside of Joomla knowledge. Are there any good (and easy to understand) description of these things?
Top Expert 2004
Commented:
CSS in Joomla is just like CSS anywhere else.  For example, open the page in Chrome and open the dev tools.  Make it display as a mobile and shrink the page area down until the menu collapses.  Inspect one of the <a> elements in your menu.  You'll see the directives applying to it, and the file which is applying them.  If you find that CSS file on your server, you can edit it just like any other CSS file.

Remember, though, that CSS is *cascading*...  there may be more than one set of directives making your menu go wonky.
Olaf BerliOwner

Author

Commented:
Thanks again!
Realize that I need to become more familiar with CSS, and your answers helped me to start doing it. Alternatively buy some professional help.

-Olaf-

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial