-
Posts
-
Hi!
We are using enfold for our website.
On a desktop the menu works fine, but on a mobile device it is not very practical to have such a long list for the menu. Instead I would prefer if the menu, when viewed on a mobile device, only showed the menu headers (e.g. ‘Meditation i Stockholm’, ‘Uppsala’ etc). Then when you click on ‘Meditation i Stockholm’ for example, the menu expands and you see the next level of headers (‘Veckorkurser’, ‘Helgkurser’). Then you click on this level of header to get info about the actual classes we are offering.
Is this possible with the Enfold theme?
If you look at this website (https://rorfokus.se/) on a mobile device, you will see what I mean.
Many thanks,
Hey Tarakbc,
You can set that under Enfold->Main Menu->Burger/Mobile menu. Look for the Menu Icon Submenu items option.
Best regards,
RikardThat was easier than expected! Thanks so much for your reply :)
However, one slight issue now is that when I am looking at the Burger menu on a mobile device, the top menu item is not at the top of the page. It is about one third down the page. It only moves to the top of the page when I click on a menu header to open up the menu. It is OK, but it looks a bit strange. Do you know how we can fix this?
Hi Victoria,
Thanks for getting back to me on this.
On the first screenshot you attached, you can see that there is quite a big gap between the X at the top and the first menu item ‘Meditation i Stockholm’. I have that gap on my mobile (Iphone 6) as well and it is this gap I want to get rid of (https://share.getcloudapp.com/yAuYdGB7). If you look on the menu on a mobile phone and then click on:
1. Meditation i Stockholm
and then
2. Veckoklasser
then you can see where I want the first item menu to be located (https://share.getcloudapp.com/2Nu5nd9q).It would seem to be more natural if the first menu item started at the top of the screen, just beneath the X, rather than one third down the page. I don’t see any reason why the menu should start there and it looks pretty strange to me. I think people looking at our site on a mobile device would presume it was a bug / some sort of mistake to be honest.
Is there any way we can fix this?
Hi Tarakbc,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
#top #av-burger-menu-ul { vertical-align: top; }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
Thanks so much for your help with this. It worked putting the code in the Quick Css.
However, the arrow to expand the drop-down menu for ‘Meditation i Stockholm’ is now very close to the X and that could cause problems.
How can we move the whole menu down a little bit so that ‘Meditation i Stockholm’ is where ‘Retreater’ currently is?
See the screenshot below of how it currently looks.
Thanks again,
Hi Tarakbc,
Please try this code instead:
#top #av-burger-menu-ul { vertical-align: top; padding: 140px 0 !important; }If you need further assistance please let us know.
Best regards,
Victoria
- You must be logged in to reply to this topic.