Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #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:

    #1079113

    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

    #1079151

    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.

    #1079315

    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

    #1079447

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

    • This reply was modified 6 days, 8 hours ago by  Sam Marin.
    #1079454

    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

    #1079501

    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 6 days, 3 hours ago by  Sam Marin.
    #1079668

    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

    #1079670

    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

    #1080051

    Seems to be working for now. Thanks Victoria.

    • This reply was modified 4 days, 4 hours ago by  Sam Marin.
    #1080153

    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

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Menu items crowds together’ is closed to new replies.