Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • June 21, 2021 at 6:41 pm #1306803
    denisechapman

    Site looks great on PC that is high resolution and on a mobile… but anything in between, the logo gets covered by the menu or disappears all together and also the menu breaks into 2 rows. Please help me fix this asap. I presumed the menu would shrink or break into a burger menu. Look on small laptop or just drag the browser window smaller and you’ll see what’s happening.

    Thanks

    June 21, 2021 at 7:08 pm #1306804
    denisechapman

    Anything under 1680 x 1050 looks like crap.
    768x 1024 switches to mobile layout but between those 2 the site looks awful.

    June 22, 2021 at 2:46 pm #1306949
    denisechapman

    HELP… I need to launch this site for client and I am STUCK with this issue!! Thank you!

    June 22, 2021 at 3:01 pm #1306950
    Yigit

    Hi,

    Thanks for contacting us!

    Please add following code to Quick CSS field in Enfold theme options > General Styling tab

    @media only screen and (max-width: 1400px) {
home #av_section_1 .flex_column_table {
    margin-top: 0 !important;
}}

    That would stop the section on homepage from overlapping on smaller screens. It seems like you have figured out menu overlapping issue by switching to mobile menu sooner.

    If you have any other issues, could you please point them out? :)

    Regards,
    Yigit

    June 22, 2021 at 4:27 pm #1306982
    denisechapman

    Hi, ya I found the other code: It makes it go to mobile menu faster.. I would have preferred everything keep shrinking to fit the screen. The code you sent didn’t seem to change anything. Is there a way to make the menu and logo shrink to fit the screen before it finally switches to tablet/mobile menu?

    @media only screen and (max-width: 1450px) {
    nav.main_menu {
    display: block !important;
    }
    #avia-menu .menu-item {
    display: none;
    }
    .av-burger-menu-main.menu-item-avia-special {
    display: block;
    }
    }

    June 26, 2021 at 11:44 pm #1307545
    Mike

    Hi,
    Sorry for the late reply and thank you for your patience and the link to your site. I believe the question now is:

    Is there a way to make the menu and logo shrink to fit the screen before it finally switches to tablet/mobile menu?

    and I see the switch occurs at 1449px, but at 1450px the logo and menu both seem to fit fine, please see the screenshot in the Private Content area.
    There is a min-width of 90px that you could remove that would help with the smaller menu items:

    .av_seperator_big_border .av-main-nav > li > a {
    min-width: 0 !important;
}

    see second screenshot. There is also 13px of padding, but I don’t think you will want to remove that.
    What did you have in mind?

    Best regards,
    Mike

    June 28, 2021 at 3:32 pm #1307766
    denisechapman

    Thanks. I think we are ok for now.. I wanted the site to shrink accordingly, including logo until it got to the tablet/mobile size.

    June 29, 2021 at 11:19 am #1307905
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Site is NOT Responsive’ is closed to new replies.