Mobile menu on destkop resolution min1025px - max1199px


I have a WEBSITE and I am having a problem with my menu on resolutions between screen size min 1025px and max 1199px.

In the resolution max 1024 the menu is ok, there is a mobile drop down menu, with a hamburger btn. Because I have more text in my menu one of the solutions wold be to have a smaller text on the menu, but I would rather have the mobile menu (just like the one that I have for max-width: 1024px) up to a resolution max-width: 1199px, and then the desktop menu.

I tried to insert different CSS with
@media only screen and (min-width: 1025px) and (max-with: 1199px) but I had no luck.

Thank you for your help,

Hi BR,

Thank you for contacting us. I am happy to help with your queries.

It seems likely your question is similar to this and I have written some codin changes solution in there. I request you trying it and do your own adjustments. Let me know your views.

aThemes Support

Thank you Kharis

Probably this would work. I tried to change only the Aditional CSS and the destkop menu changed to the mobile menu with the hamburger btn, as it should be, so this probably works, and it would resolve my issue if I would change the js/main.min.js file as describet in your other post (link).

But as I have read your post on that - “The changes you have made there will be lost once the theme gets updated in the future. So you should do this adjustment again.”. So, when changing the js/main.min.js file, changes go in the main theme, and I am using the Child theme. This probably means, that I would have to change the code everytime I update the theme, what is not the best solution for me, for now.

For now, I changed the menu font size for the specific resolution, so the menu it is not in two rows anymore.

Thank you very much for now & Best regards,