Home Forums Weaver Xtreme Theme Custom Logo moves over menu items on mobile devices

Topic Resolution: Answered

This topic contains 8 replies, has 2 voices, and was last updated by  toonin99 1 week, 6 days ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #61294
    Answered

    toonin99
    Participant

    My custom logo looks perfect on a large screen, but obstructs part of my menu on my iPad and small laptops. Is there a way to adjust the size so that won’t happen? Also, am I dreaming, or was there a setting on older versions of Weaver for formatting mobile devices?

    #61295

    scrambler
    Moderator

    Xtreme has automatic Mobile formatting, but in order to see what is going on, please provide a link to your site…

     

    #61296

    toonin99
    Participant
    #61297

    scrambler
    Moderator

    This is because of what we did to allow the logo to overlap the content.

    Adding the rule below should fix that

    .is-desktop #nav-primary ul.wvrx-menu {margin-left:150px;}

    That said as you reduce the browser size when the menu stacks on two lines, it would look better if it was moved up.

    This could be done by using the more complete set of rule below instead of the one above

    @media all and (max-width:1100px) and (min-width:780px) {
    #nav-primary ul.wvrx-menu {margin-left:150px;margin-top:-30px;}
    }

     

    #61301

    toonin99
    Participant

    I used the latter rule, and the logo is still blocking a small portion of the menu.

    #61302

    scrambler
    Moderator

    I had a typo in the value of the lower threshold it is 768 not 780…

    @media all and (max-width:1100px) and (min-width:768px) {
    #nav-primary ul.wvrx-menu {margin-left:150px;margin-top:-30px;}
    }

    #61303

    toonin99
    Participant

    It looks fine on the iPad in portrait setting, but when I view it in landscape, the problem is still there.

    #61304
    Best Answer

    scrambler
    Moderator

    This reply has been accepted as the best answer.

    If I slowly reduce the browser size on a desktop to cover all sizes, I never get a bad layout, do you?

    If you don’t see a problem on desktop with the above procedure, not sure why you would on the Ipad. Make sure you have cleared all your caches, including your Ipad Browser cache.

    If you still have issue after that, try the rule below Instead of the previous ones so the margin is Always there above 768px wide

    .is-desktop #nav-primary ul.wvrx-menu {margin-left:150px;margin-top:-30px;}

    #61306

    toonin99
    Participant

    The last bit of code did it! Thanks Scrambler!!

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

You must be logged in to reply to this topic.