Home Forums Weaver Xtreme Theme iPad menu help

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #69566
    MikeDrum
    Participant

    Hi,

    Please see image here – https://imgur.com/a/yOrbDdF

    The menu gets knocked way below the menu area on iPad, or more specifically at a certain breakpoint. I’ve been trying for a while with different settings but can’t find the right mark for this… Any help please?

    P.s this is first website I’ve used Elementor with Xtreme, really love the theme and just renewed our licence.

    Thanks and sorry to be a waste of time if so, I’m sure it’s something simple! https://www.spookyworld.co.uk/

    #69567
    scrambler
    Moderator

    I you mean that as the browser gets smaller, the menu drops below the round spooky world logo, that is because there is no longer enough space for both of them side bay side….

    If they would stay on the same line, when the browser gets below 10342px,  they would collide with each other?

    Now there are ways to fix this using CSS, but you need to make a choice on what combination of factor you would want to activate when the space becomes too small.

    First, we can move the logo to the left could be done with the rule below

    @media (max-width:1035px) and (min-width:768px){
    .is-desktop .site-logo {margin-left:0%;}
    }

    That is not enough, so next we add a rule to make the logo smaller

    @media (max-width:1035px) and (min-width:768px){
    .is-desktop .site-logo {margin-left:0%;}
    .header img {max-width:80%;}
    }

    Still not enough we can also remove the left margin and right padding on the menu

    @media (max-width:1035px) and (min-width:768px){
    .is-desktop .site-logo {margin-left:0%;}
    .header img {max-width:80%;}
    .is-menu-desktop .menu-alignright {padding-right:0;}
    ul.wvrx-menu {margin-left:0;}
    }

    Still not enough, we need to reduce menu item size and space

    @media (max-width:1035px) and (min-width:768px){
    .is-desktop .site-logo {margin-left:0%;}
    .header img {max-width:80%;}
    .is-menu-desktop .menu-alignright {padding-right:0;}
    ul.wvrx-menu {margin-left:0;}
    .menu-primary .wvrx-menu > li > a {padding-right:10px;padding-left:10px;}
    .menu-primary .wvrx-menu > li > a {font-size:0.8em;}
    }

    So Add that last complete rule to the Theme Global Custom CSS Rule box, then play with each value to get the balance you want

    For example if you don’t want to reduce the menu font size as much, you can scale down the logo more

    #69568
    MikeDrum
    Participant

    Huge help as always, thank you Scrambler!

    Works great on landscape now, I’ll do some tweaking with the code you’ve provided to do the same with portrait too.

    Thank you!

    #69572
    scrambler
    Moderator

    Two problems

    You need to add !important to the

    .is-desktop .site-logo {margin-left:0%;}

    make it

    .is-desktop .site-logo {margin-left:0% !important;}

    Or it does not do its job

    And I don’t know if this is intentional, but on mobile your logo is compressed vertically because of the max-height in the rule below

    .is-mobile .site-logo {
    margin-left: 15px;
    max-height: 100px;
    margin-top: -20px;
    }

    If you remove the max-height, it will be round again

     

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.