Mobile Menu not showing - Forum | JoomShaper
Solved Helix Framework

Mobile Menu not showing

Asked by Rich Stewart 3 months ago Last activity 2 months ago

Accepted answer

Marked as the solution
Rashida Rahman Staff
2 months ago

Hi,

Thanks for reaching out.

You can override the off-canvas menu background color by adding the following CSS to your Custom CSS field or custom.css file:

.offcanvas-menu {
    background-color: orange;
}

Also, it is not recommended to edit template.css directly, as your changes will be overwritten each time the template is updated. Please keep all your custom CSS changes within the Custom CSS field of the template or in the custom.css file.

For more information, please refer to the documentation below:

https://www.joomshaper.com/documentation/helix-framework/custom-code-css-js-meta

Best regards,

9 more replies

Oldest first Newest first Most helpful
Rashida Rahman Staff
3 months ago

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

Rich Stewart Asked this
3 months ago

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

Rich Stewart Asked this
3 months ago

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

Rich Stewart Asked this
2 months ago

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.

Rashida Rahman Staff
2 months ago

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,

Rich Stewart Asked this
2 months ago

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?

Rich Stewart Asked this
2 months ago

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;
}

Rashida Rahman Staff
2 months ago

Hi,

Glad to know that and you are always welcome:)

You may accept the most useful answer in order to close the post.

Have a nice day!

Rashida Rahman Staff
2 months ago

Thanks for accepting the answer and have a nice day!

Log in to reply.