Hi there!

Thanks for reaching out.

I have replaced the Top2 module position with the Logo module position and added the required CSS classes there. You will find a screenshot in the hidden content section for reference.

For a better header layout, I recommend using the Menu and Logo module positions. Please refer to the documentation below:

https://www.joomshaper.com/documentation/helix-framework/custom-header

You may still need to make a few additional adjustments to fine-tune the layout, but the off-canvas menu is now visible in the mobile view.

Please check it on your end and let me know if you need any further assistance.

Best regards,

Rashida

That's great, thank you so much, I was able to make some adjustments to get it to display how I want it to look. -Rich

One more question, how do I control the width trigger that switches from the main menu to the hamburger menu?

Hi Rich,

Glad that I could help and you are always welcome:)

Please check below tips for menu switching controls:

https://www.joomshaper.com/documentation/helix-framework/customization-tips#span-class-h3-how-to-show-offcanvas-menu-sooner-span

Best regards,

Thank you for the link. This is not working for me on the off-cvanvas mobile menu.

For example: I chose to have the menu items diplayed to the left in the template options, but they are still centered.

The current page link is displayed in black, I don't see how to change this, and when I added a change to my custom.css file it is overridden by the template style.

I also wanted do the sub-menu items displayed on the off-canvas menu when you open. So the menu would be expanded. I tried adding the CSS to my custom file according to the instructions at the link that you sent (Offcanvas Menu: How to display all submenu items (expand all), but it does not work.

Hi,

Please check your offcanvas menu now. It is left-aligned, and the submenu items are displaying correctly.

I added the following CSS snippet to your custom.css file, which resolves the issue:

https://cleanshot.com/share/CzkDcv6F

Please let us know if everything looks good on your end.

Best regards,

Thank you!

The current page menu item on the off-canvas menu is displayed in black, I don't see how to change this, and when I added a change to my custom.css file it is overridden by the template style below.

.offcanvas-menu .offcanvas-inner>.sp-module:has(ul.mod-menu) ul.menu>li .menu-child>li.current>a { color: #000 !important; }

I tried changing in template.css, but it seems to revert back to #000. I cannot figure out where this color value is stored?

Thank you, I added this to Custom Code on template option and it worked:

.offcanvas-menu .offcanvas-inner>.sp-module:has(ul.mod-menu) ul.menu>li .menu-child>li.current>a { color: #fff !important; }

Thanks for accepting the answer and have a nice day!