Mobile menu on larger screens not working properly

Hey @peterlang232,

I checked the page you shared, and it currently has a normal (Desktop) layout.

Can you please let me know what the problem is, more specifically? <span style=”box-sizing: border-box; margin: 0px; padding: 0px;”>Please note that providing CSS falls out of our Support Policy, so we will do our best to assist you in achieving </span>the desired behavior as long as it complies with it –?https://docs.themeisle.com/article/1146-support-policy.

Best regards,

Andreea

Hello @andreearadacina21, thank you for your reply! The theme has two menus. The first one is the one with text (desktop menu) and the other one is the hamburger menu (mobile menu). When the screen gets smaller, it still has the desktop menu. The problem here is that the text of the menu gets wrapped onto 3 lines. This doesn’t look good and it should change to a hamburger menu. In the screenshot you can see what I mean: https://prnt.sc/Jkqqe8xXcXq1.

I followed the article of the theme in which you can change the breakpoint of the transition from desktop menu to hamburger menu. This means it will change to a hamburger menu faster with a bigger screen width. The problem now is that the menu doesn’t work properly at a specific range (from 769px to 909px). You can see an example in this screenshot with a screen with a width of 769px: https://prnt.sc/-qGu4fwvBuY0. You can try it yourself and you will see that the hamburger menu isn’t working and it doesn’t look the same as the hamburger menu (from smaller width than 769px). This is how it should look: https://prnt.sc/W8bex9comINa (screen width = 700px).

Best regards,

Peter

Hi @peterlang232,

Thank you for explaining the problem thoroughly!

I have tried to replicate this behaviour on a clean instance, just installing the Hestia theme and adding the code from here to the Additional CSS tab, but the menu’s breakpoint worked.

Can you please check that this is not related to a plugin conflict or that it appears due to some custom code? You can use this doc to help you with the troubleshooting – https://docs.themeisle.com/article/1112-theme-doesnt-work-as-expected-troubleshooting-guide.

Please let us know how it goes!

Hello @mara3, thank you for your reply! I’ve followed the troubleshooting steps but I still have the same issues. This is how the menu looks in troubleshooting mode: https://prnt.sc/TZZWwP7PRxkr. I think the provided code for additional CSS from the article on enabling mobile menu on larger screens is incomplete or outdated. Some elements are missing (design, transformations, colors etc.).

The mobile menu appears on screens lower than 769px. If you change this breakpoint to a higher px, the menu doesn’t look the same as for 769px and lower. I hope you could help me with this problem!

Hi @peterlang232,

Thank you for your continued use of Hestia and for reaching out!

We understand your concern regarding changing the theme breakpoints. However, this type of customization falls outside the scope of our support services. The workaround provided in the article you mentioned was offered due to frequent inquiries, but altering the theme’s breakpoints can lead to inconsistent behavior.

The CSS code provided in the article represents the average values we found effective for similar issues. To address some of the problems you’re encountering, you can try adding the following code in the Additional CSS section:

.navbar .navbar-nav li .caret{
		border: none !important;
		border-top: none !important;
		position: static !important;
		font-weight: 400 !important;
		font-size: 12px !important;
	}

Please note that while this may help achieve a more consistent look, we cannot provide further support for this type of customisation as per our support policy.

I hope you understand!

Kind regards,

Mara

@mara3 Hello Mara! Apologies for the delayed response, I was on vacation. I understand that this level of customization is beyond the scope of our support services. Unfortunately, the CSS you provided didn’t resolve the issue as I had hoped. Nevertheless, I really appreciate your effort and assistance. Thank you very much! I will leave the menu now as it as and maybe try to fix it later.

Hi there @peterlang232,

Thank you for keeping us updated on your situation!

We appreciate your understanding regarding our support policy. Remember that we are always here to assist you with any issue regarding the theme’s functionalities.

If you encounter any other challenges or need help with anything else when using the theme don’t hesitate to reach out!

Kind regards,

Mara