Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #860151

    Hello,
    I’ve recently did the Enfold theme update and everything looks great on web, but there is some problem on mobile view.
    The logo (left side) and the header menu icons (right side) are overlapping on top of each other.
    I read the other threads that had the same problems and copied/pasted the code for CSS styling, but all of them did not work for me. Would you look at my website and identify a solution for me? Thank you
    I’ll leave my website url, a screen capture image of the mobile view issue, and admin login in the private content

    #860448

    Hey hallyupedia,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 480px) {
    .responsive #top .av_header_transparency.av_alternate_logo_active .logo a > img {
        max-height:50px !important;
    }
    }

    Best regards,
    Rikard

    #860456

    Hi Rikard,
    I pasted the code you provided.
    Something changed for sure. The logo on the left side got smaller, but it is still overlapping.
    If the 3 menu icons on the right side moved more towards the right, I think it would resolve the issue.
    I will show you the picture of what it looks like after pasting in the code you provide (private content area).

    #861379

    Hi,
    To move the items to the right try this code in the General Styling > Quick CSS field:

    @media only screen and (max-width: 480px) {.responsive #top #wrap_all .main_menu {right: -50px!important; }
    }

    Best regards,
    Mike

    #861383

    The code provided by both Mike and Rikard did not work for me. I’m still having trouble with the logo and menu icons overlapping in mobile screen. After adding code in CSS styler, I can see that it changed something, but it did not solve the issue and the changes only happens on certain pages (not all).

    screenshot: https://i.imgur.com/gG7HCNS.png

    • This reply was modified 2 months ago by  hallyupedia. Reason: forgot to add screenshot
    #861396

    Hi,
    I added the above code and flushed your site cache, Please (Purchase code hidden if logged out) /”>clear your browser cache and review
    2017-10-07_111649

    Best regards,
    Mike

    #861400

    Hi Mike,
    I cleared my browser cache and looked through my website.
    The Homepage looks perfect. It seems the problem is resolved.
    But the overlapping is still an issue for my other pages. Actually, except the homepage, I’m seeing the overlapping for all other pages in the website.

    #861413

    Hi,
    I changed your code to this:

    @media only screen and (max-width: 426px){ 
    .responsive #top #wrap_all .logo a > img {width: 183px !important;}
    .responsive #top #wrap_all .main_menu {right: -50px!important; }}

    it seems to be working on all pages now, please check.
    Best regards,
    Mike

    #861428

    Hi Mike.
    Everything looks great. The problem is fixed. Thank you so much for your help. I appreciate it!

    #861430

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

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

The topic ‘Mobile View: the logo and menu icons are overlapping’ is closed to new replies.