Tagged: , , , ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 15, 2019 at 12:47 pm #1079099
    Samuel

    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 #1079113
    Mike

    Hey 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,
    Mike

    March 15, 2019 at 3:00 pm #1079151
    Samuel

    Hi 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 #1079315
    Mike

    Hi,
    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,
    Mike

    March 16, 2019 at 4:11 pm #1079447
    Samuel

    Have just set a private admin login for you which will expire in three days from this moment. Thanks.

    • This reply was modified 5 years, 4 months ago by Samuel.
    March 16, 2019 at 4:53 pm #1079454
    Mike

    Hi,
    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,
    Mike

    March 16, 2019 at 9:33 pm #1079501
    Samuel

    Hi 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, 4 months ago by Samuel.
    March 17, 2019 at 5:30 pm #1079668
    Mike

    Hi,
    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,
    Mike

    March 17, 2019 at 5:34 pm #1079670
    Victoria

    Hi Sam Marin,

    I cannot seem to reproduce the issue on my end on a Mac.
    Here is what I am seeing:
    Image 2019-03-17 at 17.32.40.png
    Image 2019-03-17 at 17.32.59.png
    Image 2019-03-17 at 17.33.13.png

    Best regards,
    Victoria

    March 18, 2019 at 8:09 pm #1080051
    Samuel

    Seems to be working for now. Thanks Victoria.

    • This reply was modified 5 years, 4 months ago by Samuel.
    March 19, 2019 at 1:12 am #1080153
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Menu items crowds together’ is closed to new replies.