Protostar, menu position in mobile version

[hajo70]

I am using Protostar "out of the box" and am extremely happy with that. Except from one thing, the menu in the mobile version.

In the desktop version I have the menu to the right with all the "level 1" items of the menu visible and "level 2" of the menues expanding when you click them. I assume this is standard behaviour. I would like to stick to this.

In the mobile version, at least in my setup, the same menus end up below the contents. Since some of my articles are rather long, my visitors will have to make a lot of scrolling and for me it's also not intuitive that you find the menu at the bottom of the article.

Is there a simple way to get an expandable menu -button- (I don't want the articles to start with a long menu on mobiles) at the top of the screen using Protostar? Preferrably the menu stays on top of the screen while the user is scrolling down, reading the article. Preferably a solution that doesn't force me to make manual updates/changes in index.php etc after every Joomla update.

Suggestions on other solutions are of course welcome! I do however want to stay with Protostar.

Running 3.9.1

[JTema]

That free menu extension may be an option. https://extensions.joomla.org/extension ... gger-menu/

[Jaydot]

This is the way it's supposed to work: you have a left sidebar, a content area and a right sidebar.
On a small screen, it will stack in that order: left sidebar on top of content on top of right sidebar.
To keep your menu at the top on a small screen, you'd have to move it to the left sidebar.
Alternatively: make a copy of your menu-module in the left sidebar, and display that on small screens instead of one in the right sidebar, based on a media query in CSS.
Or you could display the menu horizontally, in the "navigation" position, that will always stay at the top.
It is possible to make the menu module "sticky" - staying fixed when the user scrolls - but that requires quite a lot of CSS knowledge.

[hajo70]

Thanks for your quick support!
Fiddled around with ZA Trigger and its settings but never got it to work as I wanted...

Tried to move the menu to the left but it looks and acts completely different. I suppose that have something to do with "Position: position-7, Style: well outline" and "Position: position-8, Style: xhtml outline".

As you may understand I have slightly more than "extremely basic knowledge" about this. Given this and what I would like to achieve;

• keeping the desktop menu as it is (to the right or left, doesn't matter as long as it looks and works as today) and

• on mobile devices having a menu button (something else that handles a rather large number of menu items in a good way). I would like to show level 1 items by default and folding out level 2 items when the user is "clicking" on level 1 items with sub-menues.

would it possible to do that with the support of the forum or should I try to find an extension? I am trying to keep the number of extensions as low as possible (less to worry about when updating and trying to sort out problems).

[Per Yngve Berg]

The menu is designed to be in position-1. It will reduce to a hamburger menu on mobile devices.

[hajo70]

Ahhh... That was a step forward :-) I see that I have to re-organize the level 1 menus, too many. That suggestion also generated some questions:

• I have my present modules in pos 7 outlined and a light grey background. How do I get that back in pos 1?

• As the menus are built up now (see site address below) all menu items have an article connected to them and in some cases sub-menus with their respective article. When you click on a level 1 menu item, its article is shown and in the menu you can see if there are other subarticles. With the menu in pos 1 it works a bit differently and its easy to miss either the level 1 article or its sub-articles(*. How should I approach this? Have no article connected to the level 1 menu if there are sub-levels and move its present article to a sub-level in order force the sub-levels to show so to speak?!? The main menus on top of the forum here works as I would like, both in desktop and mobile mode.

*) if I click a menu with sub-menus but move the cursor away from the menu item, there is nothing that reveals that there are sub-menus. I have to move the cursor - carefully - within the menu item to see them, or, if I have moved the cursor outside of it, position the cursor ontop of it again. On a mobile device this problems is accentuated as I see it.

[Per Yngve Berg]

Set "Always show sub items" in the menu module for drop downs to work.

[hajo70]

Thanks again Per Yngve!
Since it - to me at least - is not 100% obvious that a menu item which also has sub-menus, e.g. "Restoration", also is connected to an introductory article, would it be completely absurd to copy the menu item and place it as the first sub-menu item? In order to assure that my visitors don't miss it...

The car -> Article about the car
Restoration -> General intro article regarding restoration
- Intro -> General intro article regarding restoration
- How to -> How to article
- Engine - > General engine restoration intro article
-- Intro -> General engine restoration intro article
-- Engine & carb -> Article about engine and carburetor article
-- Fuel pump -> Fuel pump article
- Clutch -> Clutch restoration article
- etc

And would it penalize my google site ranking to have the article linked twice in this way?

[Per Yngve Berg]

You can use a Menu Item of type Alias.

Why do you utilise so heavily the Single Article Layout?

Use a Category List menu item type and you will need only a few menu items. For the Intro, you can use the Category Description instead of a separate article.

[hajo70]

Why do you utilise so heavily the Single Article Layout?

Self learned from different pages on internet. They normally say "Start with Create article, then Create Menu and then just connect them, Hello world!" :-) Continued that way...

I have a simple category system in place but in order to utilize that for menus I would partly need to reorganize that. Since my URLs are partly based on categories that would mean a couple of redirects. Not sure I want to go that route. Since the structure of the site is rather stable, will only add one or two main menu items more, I don't really want to spend time on getting the improved flexibility a well implemented category system would give. Will probably regret this saying in a couple of years :-)

Use a Category List menu item type and you will need only a few menu items

I assume you're talking about "Menu Item Type-Articles-Category list"?! That gives me an article/a page with the articles belonging to the chosen category listed, not the equivalent sub-menu items. Not really what I want to achieve. Or have I missed something again :-)!?

[hajo70]

I assume one way would be to use "Menu heading" or "Separator" types but is there an "easy" way to get them look like the other menu items? On 2 sub menu levels.