![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: image size, items, menu, resolution, size
-
AuthorPosts
-
March 15, 2019 at 12:47 pm #1079099
Hi,
I would like to know how to prevent the menu items from bunching up when showcasing a website in lower resolution or inches sizes. It is giving some bad image when showing it and doing demos to clients.
This is how it looks:March 15, 2019 at 1:13 pm #1079113Hey Sam,
One option is to increase the screen size that the mobile menu shows at, such as having it show until 1274px.
Another option is to decrease the font-size for the menu items until 1274px.
Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field to try the second option:@media only screen and (min-width: 767px) and (max-width: 1274px) { span.avia-menu-text { font-size: 70% !important; } }
Please feel free to adjust the font size to suit, and then clear your browser cache and any cache plugin, and check.
Best regards,
MikeMarch 15, 2019 at 3:00 pm #1079151Hi Mike,
many thanks for getting back. Unfortunately the code does not seem to be working. I have been tweaking the numbers for both the min/max width and the font size and cleaning the browser cache but nothing happens.
Any suggestion?Thank you.
March 16, 2019 at 1:35 am #1079315Hi,
I see that your css is loading, but 70% is still not enough but 65% seems good. Please try 65% and Then clear your browser cache and any cache plugin, and check.
Or please include admin login in the Private Content area so we can be of more assistance.Best regards,
MikeMarch 16, 2019 at 4:11 pm #1079447Have just set a private admin login for you which will expire in three days from this moment. Thanks.
-
This reply was modified 5 years, 5 months ago by
Samuel.
March 16, 2019 at 4:53 pm #1079454Hi,
Thanks for the login, I changed your css to 65% as described above and now the menu text doesn’t overlap the logo on smaller screens.
Please clear your browser cache and check.
Please see the screenshot in Private Content area.Best regards,
MikeMarch 16, 2019 at 9:33 pm #1079501Hi Mike,
The outcome remains the same even now. I have tested this in 2 different machines:
– Macbook Pro, adjusting resolution size to 720p. Safari and Chrome. Cleared cache files in both browsers plus using Comet Cache inside the admin panel.
– Windows laptop, resolution screen 1360×768 / both system and browser scale set to 100%. Edge and Chrome, both of them cache cleared.Is it any other way of amending this?
Many thanks.
-
This reply was modified 5 years, 5 months ago by
Samuel.
March 17, 2019 at 5:30 pm #1079668Hi,
Ok I tested on a Mac and adjusted the css to this:@media only screen and (min-width: 767px) and (max-width: 1400px) { span.avia-menu-text { font-size: 50% !important; } }
Please clear your browser cache and check.
Best regards,
MikeMarch 17, 2019 at 5:34 pm #1079670March 18, 2019 at 8:09 pm #1080051Seems to be working for now. Thanks Victoria.
-
This reply was modified 5 years, 5 months ago by
Samuel.
March 19, 2019 at 1:12 am #1080153Hi,
Glad to hear, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)Best regards,
Mike -
This reply was modified 5 years, 5 months ago by
-
AuthorPosts
- The topic ‘Menu items crowds together’ is closed to new replies.