Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Mobile menu shifts down below header.

Featured Lock Resolved Issue
The mobile menu shifts down, thumb slider shifts left issues:
https://www.screencast.com/t/bM6SVlRFQOr

3 Answers

pepperstreet

More than a month ago #Permalink
Hello Americade, I have seen similar topics and issues. In most cases this behavior is a result of the applied and missing column settings. Specifically the column Mobile/Tablet layout parameters. Those settings might be pre-defined in the quickstart package, but not in the single template installation.
Also users often forget about the column settings and their important correlation: For instance each change inside the same row, might effect the other columns and their width. So it is very important to set the right values in each of the columns... otherwise one column might occupy too much space and might shift the other columns!

1. ) Check your template style -> Layout editor -> HEADER row
Most likely the "Add Columns" uses the 3/9 setting. (a row always sums up to a total of 12!)
This is the default setting and Helix applies the same classes for small and medium devices/breakpoints...
until you change something inside a column! This logic is somewhat strange and not 100% clear, but it's the way it works inside the visual layout editor. The defaults might work, but often mobile layouts need a different appearance, have different logo sizes etc.

2. ) Check LOGO and MENU column settings. Click each of the gears/cogs icon and see for parameters Tablet layout and Mobile layout. I would suggest to set at least Mobile layout parameter. It is crucial to set it for ALL columns! If you just set 1 parameter, the remaining columns would still stretch to 100%.
Try to set LOGO Mobile layout to 9 (col-xs-9) and MENU Mobile layout to 3 (col-xs-3)
As you might see, it is the opposite setting of the defaults. You can also try other values, just remember to sum up to 12.

Hope this helps.

Americade

More than a month ago #Permalink
Hi pepperstreet,

Correct, have column now set to (2,10) and then set logo to (col-sm-2) and menu to (col-sm-10), for both tablet/mobile:
https://www.screencast.com/t/UQdyu6rZfUo
This fixed the mobile menu, it now stays put.

Thanks!

pepperstreet

More than a month ago #Permalink
Correct, have column now set to (2,10) and then set logo to (col-sm-2) and menu to (col-sm-10), for both tablet/mobile

Not exactly what I had in mind... but if it works for you, I am fine!
Actually, your logo column should have more space then the mobile burger-menu.
A mobile layout only should work as well. As far as I know, the Helix layout editor sets the Tablet classes automatically. (until you change them individually in the column settings)

Thanks!

You're most welcome.
(BTW, you can choose a comment as answer, so the topic is marked as solved)


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 148
Toufiq

Toufiq

Total Accepted Answers: 102
Sifat

Sifat

Total Accepted Answers: 83
Kamruzzaman Alam

Kamruzzaman Alam

Total Accepted Answers: 2
J

jurateam

Total Accepted Answers: 1

116

Templates

299301

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us