Responsive multilayer menu/navigation (submenus) without hamburger button ?

Hi Andy

– I’m not sure what you mean by “I think it could be possible”? Are you confirming it is possible or does it just mean “maybe” (i.e. purchase and find out yourself)? Does anybody else know for sure?
– all these demos use the hamburger button – the one thing I explicitly said I did not want to use – I’m disappointed.

Any other suggestions?

Regards,
Bruno

Hi Yigit

It seems that I missed the boat.
I have just noticed that the “Enfold shop demo” addresses part of my question.

The only thing I hate about it is that the side menu hides the entire screen of a mobile device.
Is there a workaround in Enfold?
See: https://s.codepen.io/lukejacksonn/fullembedgrid/PwmwWV?type=embed&animations=run# (I would replace the number with text “more”).

Best regards,
Bruno

more examples: https://css-tricks.com/the-priority-navigation-pattern/

• This reply was modified 8 years, 10 months ago by bruwa.

Hey

thanks for your comments.
Meanwhile I created a mockup of the desktop as well as of the envisioned mobile version.

1) The desktop version should show a vertical menu on the left side, with the same design as the dummy from the Flashlight demo.

2) The mobile (responsible) version should show a vertical menu sliding in from the right edge (including 3 menu levels). The slider should not hide the entire screen, but only have the width needed to accommodate the menu.

Can both be done in Enfold?

(I gave in as far as my request to avoid the hamburger button is concerned. I still don’t like it, but if the mobile user is happy with it, it’s okay.

Thanks,
Bruno

Hi
The links to my mockups were in the private content. Maybe the have gone lost in cyberspace, so I added them here again (private content).

It seems that my last sentence was not clear: I no longer request to avoid the hamburger button. (I still don’t like it, but if the mobile user is happy with it, it’s okay.). However, I insist that the slider does not hide the entire screen (and the hamburger button sits on the right hand side of the header). I hoped this could be done with just a CSS modification.
Thanks for pointing me to these plugins. I’ll give them a try.

Regards,
Bruno

Hi

my post starts with the following statements (quote):
– My current site http://www.fotowalther.ch is created with Flashlight (non-responsive).
– I might switch to Enfold, provided there is a solution for the menu as described.
**************
My questions (requirements for switching) are:
1) I want the desktop menu to look the same with Enfold as with Flashlight (see mockup or active homepage)
2) the mobile menu must NOT hide the entire screen (it should be flexible and only take the width required to accomodate the menu as shown in the mockup).

I was then asked to create mockups to show my points.
There must be a fundamental misunderstanding. Why would you like me to show the solution when I am asking to know if it can be done in the first place?
To see how it looks when the mobile menu hides the entire screen please check any of the Enfold demos. I’m asking because I don’t want the menu to look like this. I wonder whether it would be possible with a CSS code or a file modification to achieve what I want.

Regards,
Bruno

Hi Andy

Thanks!
What about the desktop menu?
Where in Flashlight can I find the code of the menu I’m looking for (that partially transparent block, offset from the left edge – see my current homepage or the mockup/screenshot or the Flashlight demo)?
What code (CSS?) would I need to transfer or modify (and where to insert/modify)?

Cheers,

Bruno

Hey Andy

Re desktop menu:
I added 2 links to show my point (edited screenshots – see private content).
– In the Flashlight menu, part of the menu area is transparent (top and near bottom)
– the Flashlight menu is moved to the right (this is what your code is supposed to do – unfortunately I don’t see any change)

How can I move the menu and create the partial transparency in Enfold?

*******************************************************
Re mobile menu:
Your code reduces the width of the menu, however:
(please check the screenshot from a responsive theme in the private content)
1) the area on the left of the (reduced width) menu should be transparent (remember, my goal is that the menu slider must not hide the entire screen)
2) is there a way to make the width of the menu slider flexible, i.e. self-adapting to the width of the content of the menu, instead of a having a fixed percentage of the fullsize slider (if there are only short items in the menu, the slider should be smaller, when the content includes long words, the menu slider should get wider accordingly). Of course I can check and adjust the width when I add a new menu item, but it would be more elegant if this happened automatically.

Regards,
Bruno

BTW: these desktop design elements were what caught my eye, when I first saw the Flashlight demo, therefore I would like to recreate it in Enfold

Hi Andy

re Flashlight
could you please let me know which code in which file creates that specific menu design in Flashlight (see link in private content)?

Thanks,

Bruno