Tagged: , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 4, 2017 at 2:47 pm #860151
    Nick Alta

    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

    October 5, 2017 at 6:38 am #860448
    Rikard

    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

    October 5, 2017 at 6:49 am #860456
    Nick Alta

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

    October 7, 2017 at 3:53 pm #861379
    Mike

    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

    October 7, 2017 at 4:12 pm #861383
    Nick Alta

    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 7 years, 1 month ago by Nick Alta. Reason: forgot to add screenshot
    October 7, 2017 at 5:18 pm #861396
    Mike

    Hi,
    I added the above code and flushed your site cache, Please clear your browser cache and review
    2017-10-07_111649

    Best regards,
    Mike

    October 7, 2017 at 5:56 pm #861400
    Nick Alta

    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.

    October 7, 2017 at 7:08 pm #861413
    Mike

    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

    October 7, 2017 at 8:16 pm #861428
    Nick Alta

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

    October 7, 2017 at 8:25 pm #861430
    Mike

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

    Best regards,
    Mike

  • Author
    Posts
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.