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

    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


    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,


    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).


    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,


    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).


    • This reply was modified 6 years, 6 months ago by Nick Alta. Reason: forgot to add screenshot

    I added the above code and flushed your site cache, Please clear your browser cache and review

    Best regards,


    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.


    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,


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


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

    Best regards,

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.