Customize /disable mobile menu

[ChrisBoom]

Hi folks,

I'm new to the forum and will shortly be starting a weather site at www.wachtendonkwetter.de.

I am currently setting up the mobile version and would like to make it a plain vanilla vertical sequence of blocks. Period. No need for a menu, or at least not the trillion options it offers.

Is there a way to disable or customize the mobile menu?

Cheers
Chris

[meteocaldas]

Hi Chris, I don't know if disabling the Mobile menu is going to work for you, but I have already tried it in my site (for testing purposes), and so far, it has been working like a charm.
Try this: In the template root go to to the folder /mobile/ and rename menu.php to any other name, for instance menu_off.php.
This simple procedure will disable the menu, and as I said, I have not yet noticed any problem, with the functionality of the blocks that I am currently using in the mobile version.
However, be aware that this menu.php is a very complex script, and I am almost sure that blocking it, may interfere with some other parts of the template, or even make it disfunctional, so it should only be used for testing purposes.
In other words, try it just for fun, at your own risk or wait for Jachym's wise opinion.

If you want to check a mobile version with the menu disabled, make a visit to my site, using a Mobile device with a 5" to 7" screen.
In my opinion, using a screen larger than 7" is a nonsense, because it "kills" all the elegant touch of Meteotemplate´s mobile version
http://www.meteocaldas.com/mtp/indexMobile.php

[Jachym]

It is not a very elegant solution, but it should work, you could also go inside the mobile menu.php and delete everything and have it as a blank file. Obviously the most elegant solution would be to directly delete loading the menu altogether, but that would require several changes in the scripts

[meteocaldas]

It is not a very elegant solution, but it should work...

Hi Jachym, thank you so much for this info.
From now on, I will feel much more confortable in using MT mobile version with its menu disabled. The majority of the mobile menu options is not suitable for small screens, so my goal now is to find a way to use the mobile menu, to only display some very basic but useful options, like site info, contact form, etc.
It is quite interesting to note that many of the sites using MT, did not gave a special attention to build a correct (viewable) mobile version, using the huge potencial MT has to offer for this.
Working with a single column (instead of the 2 or 3 columns that many sites are using), and a vertical sequence of correct MT blocks (only the ones that are suitable for small screens), makes the MT mobile version a perfet solution for mobile devices!
I would dare to say that the single column MT mobile version, can produce the same (or even beter) results, than a complex mobile app would.
I am really happy with it, and fell no need for an MT app, where we could do little or nothing to suit our own preferences and choices
As I wrote in my previous post, if you have any doubts, check the result in Meteocaldas site using a 5" to 7" device and see for yourelf, how much info can be pleasantly displayed in small screens.
http://www.meteocaldas.com/mtp/indexMobile.php

Once again, thank you so much Jachym, for this beauty called Meteotemplate (mobile or desktop)!

[ChrisBoom]

Hi there,

thanks a lot for the hint. Renaming menu.php did just what you described - it killed the menu and so far I could not find any further effects on the single-column page.

I totally second your idea that one column is definitely enough. It's compact, it's zippy and looks great. Mobile view is for a quick glance on the go, and for in-depth data analysis you can still switch to desktop.

One question: How did you set the mobile header to match your template color? Once I disabled the interactive banner, it just went black. The desktop version now has a customized banner, but mobile doesn't pick it up.

@Jachym: Thank you for your great work!

Cheers
Chris

[meteocaldas]

One question: How did you set the mobile header to match your template color?

Hi Chris, to change the header colour I added a background colour definition (<td style="background-color:#546e7a">) in the /mobile/header.php script, along with some other minor changes like removing the flag to add the sun icon, and adding the 2 horizontal lines on top and bottom of the header.
If you are not familiar with php and html, then it will become more difficult for you to make these changes. However, since it is only 5 or 6 lines that need to be rewritten, send me a PM describing how you would like your header to be, and if you just want it to be as simple as mine is, I will try to make the necessary changes in your header.php to suit your needs.

Of course the header can be made more complex to display one or several pictures (similar to the current condition banner), but this only makes sense for devices with large screens, where the header will be visible while you read most of the data displayed in the page.
For mobile devices it is useless and kind of a nonsense. It increases loading times, needs more data resources, and the real impact in the beauty of the page is minimal, because the user will immediately need to slide down the page to see the rest of the content, and he will not be looking at the "beauty of the header" anymore
Cheers

[ChrisBoom]

Thanks for the hint. First and foremost, I was worried about altering the code. However, I have a sneaking suspicion that the changes would need to be made in the indexMobile.php, right? The header.php seems to define font sizes and does a lot of tech stuff for the interactive banner, but it does not seem to set the bgcolor.

Cheers
Chris

[meteocaldas]

I have a sneaking suspicion that the changes would need to be made in the indexMobile.php, right? The header.php seems...

Hi, probably you are right about the importance of indexMobile, but I left it untouched.
The only files that I have changed were mobile/header.php (modify header look), mobile/footer.php (modify font-size), and the /css/mainMobile.php (modify font-sizes for the header titles in title1 and title2).

I am sending you a PM with the lines that I customized in mobile/header.php including the changed background colour

[polbrieuc]

Hello all,

I am new to Meteotemplate (actually my first post) and I am not sure about the mobile menu behavior.
When modify the menu in the admin page, does it also impacts the mobile menu ?
Specifically, I added the plugin myStation and expected to see it both in the desktop and mobile version :


The desktop menu is fine (it correctly links to plugins/myStation/index.php):


But the mobile one does not show the plugin myStation, it still shows the default station page, although I took it off in the menu setup (it links to mobile/pages/other/aboutStation.php ):


Would this be cache related ?
Should I customize the mobile menu manually ?

And a second question to @meteocaldas : how did you get the "more" section of the Current block to display correctly on mobile ?
Mine looks like that :

While your looks great :


Did you modify the CurrentBlock.php to modify the table or is there some kind of responsive behavior ?
[EDIT] I finally copied the currentBlock, modified its name to currentMobile, adjusted the php so the sections are in separate rows in the table and it works : https://www.elspinars.es/indexMobile.php

Thanks.

[Jachym]

Hi,
the mobile section only includes the basic pages which are optimized for small screens, therefore also the menu is fixed and only includes links to the optimized pages. All higher end phones should be able to display the desktop version just fine (in landscape mode)

[meteocaldas]

question to @meteocaldas : how did you get the "more" section of the Current block to display correctly on mobile ?
Did you modify the CurrentBlock.php to modify the table or is there some kind of responsive behavior ?

Hi, it looks like you have already solved the problem, and it also looks like that we both are lovers of "vertical" mobile
I can't get used to MT in horizontal mobile, because I am not able to read the whole block without sliding it several times.

As Jachym said, he creates blocks to work well in desktop and in H-mobile, and the great majority of blocks does exactly that.
However, sometimes, (like the more part of the current block), the design is not suitable for V-mobile devices (5"-7" V-screens), and the only solution is to customize the block as we did.
I always try to use the same block for both desktop and V-Mobile, and that is usually achieved just by modifying some text font sizes and some other minor details.
When such thing is impossible, then the best way is to create a "mobile block version" as you did, and work on it until the result is fine. Your current block looks perfect in V-mobile!

And last but not least since you are a newcomer here in the forum, wellcome and enjoy this masterpiece called Meteotemplate!