Mobile menu sidebar toggle isn't working properly

takipan · November 26

Hi. I have an issue with mobile menu toggle. I am using a sidebar for this. The problem is user needs to click a small icon to reveal the submenu instead of clicking on a word.

I know this issue was discussed many times here. I've tried all the CSS scripts posted here on this topic and also tried to do this myself, but nothing seems to work.

Can you please help me with this?

My website is https://wieloo.com/.

Phil · November 27

Hi,

Please edit your header template and add Desc to your Menu Burger element:

You can set up the position in the Style tab:

Best regards

takipan · November 27

Hi Phil! Thank you for your answer.

However now I see I didn't formulated my question clearly enough.

The problem was about the items after the user clicks the hamburger menu icon. Then when user clicks on a parent category like "Women" it should open it's submenu like Hoodies, T-shirts, Dresses, but it wasn't. Only a small icon did that.

But...

Funny enough I've found a solution to this problem by accident while yesterday I was looking for it all day.

For anyone looking for the solution, it is here: https://forum.muffingroup.com/betheme/discussion/74436/mobile-menu-submenu-only-expands-when-icon-is-clicked-instead-of-whole

Just copy the CSS code:

.mfn-sidemenu-tmpl .mfn-sidemenu-menu .menu-item .outer-menu-sub{
 position: absolute;
 width: 100%;
 justify-content: end;
}

and paste it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

And to the Muffin Group - thank you for creating this AMAZING theme :)

Phil · November 27

I am happy to see that you found the solution.

If I can help you with anything else, please let me know.

Best regards

takipan · November 27

I see there is a different issue now. Can you please tell me how to align submenu icon to the text? Now it's higher when I added images to the menu options.

Can you also tell me how to change z-index of the sale notification popup?

Phil · November 28

1) To the CSS you used for submenu opening add height value:

.mfn-sidemenu-tmpl .mfn-sidemenu-menu .menu-item .outer-menu-sub{
 height: 100%;
}

2) Use this CSS code:

.mfn-fake-sale-noti{
 z-index: 1000!important;
}

Best regards

takipan · November 28

Thank you. The first code works, but unfortunately the second one doesn't.

I would like to hide sale notification popup behind "product-top-section-mobile" class, which I gave z-index 999.

But no matter how I try, it doesn't work.

Do you maybe know how to achieve this?

Phil · November 29

These two blocks are in different level in HTML structure and it is impossible to do what you need.

As a workaround with a CSS this box can be completely hidden on a product page.

Best regards

takipan · November 29

Thank you for all your help Phil

Mobile menu sidebar toggle isn't working properly

Comments