I am adding a second menu to my webpage, and I need it to be responsive and mobile-friendly.
I have added an Advanced Menu module to my layout, and it looks good on desktop, but I would like it to become a hamburger menu on mobile.
I see that on layouts from the Hubspot theme, the header menu works this way, but I cannot find a way to toggle or activate this behavior for the Advanced Menu.
I am building custom pages using the CLEAN 6 theme.
Hi @MattOnce,
the CLEAN6 theme is a great theme (and one of the best sellers), it (should) have mobile navigations.
Have you added all the default CSS classes of the menu module to your own module?
best,
Anton
Hi Anton, thanks for your reply.
I’m not aware of any menu module from CLEAN6 (global header not included), and I’m not skilled enough to create my own module.
I’m adding a second navigation bar using the (non-CLEAN6 module) advanced menu. I’ve placed it within the “CLEAN6 multi-column content” module - col 1 for a logo image, col 2 for the menu, col 3 for a CTA.
But unlike the CLEAN6 global header, and the Hubspottemplate header, it does not switch to a mobile/hamburger layout on smaller screen resolutions.
If adding “all the default CSS classes of the menu module to your own module” would solve this, I’d appreciate it if you could explain how I would go about doing this.
Thanks again.
Screenshot can be found here:
Hi @MattOnce,
you can add CSS classes here:
it’s a screenshot from the vast template since I don’t have the CLEAN6 template but the logic is everywhere the same.
Click on the module which should have a(or multiple) CSS class and you’ll see a inputfield called “CSS class” in the right sidebar. copy&paste/write the class name which you’ll see below the module name from the working menu into it. Save it and you’re done.
For example: If class of the CLEAN6 menu is “custom-burger-menu”, then you’ll give your new menu module the same class.
best,
Anton
I don’t understand why this answer is marked as a solution. This is not a solution to the issue, because CLEAN 6 looks like HubL code, not block building, and the ‘custom-menu-primary’ class has already been added, but the menu is not displayed on mobile devices.
I think that, being new to the platform, I assumed that it was more likely that I was doing something wrong than the information given was lacking. If there is a better solution, I’d still like to hear it.
Since this topic was created by the Helpful hero team -- I first referred to the documentation (https://www.helpfulhero.com/clean6/documentation). But not finding the answer I needed, I wrote to their support (Helpful Hero - Contact or you can email kevin@helpfulhero.com). I received the following response:
"Usually, when this happens it means there is a legacy JS file being included somewhere. Here is a quick video of where to look and remove this.
Checking for legacy JavaScript Files | Loom "
But this option did not suit me, since in my case there was no code in the settings.
Therefore, the correspondence is continued, and when the reason that affects the display of the mobile menu is clear, I will let you know.
