Mobile Menu toggle not in same position

  • Hi again

    So the client asked why the mobile menu is not all the way to the right justified. I checked on my phone and it is. On his, it isnt. These are two very different sized phones.

    I checked and I indeed have a spacer already (100px). If I make the spacer any bigger, then the menu is off screen on my phone but not on his.

    I thought that the design of the mega menu will automatically put it as far right as possible no matter what the screen? On another site I manage, I am not using mega menu and on that one it seems to have the mobile menu to the far right, no matter the phone or screen.

    What can I do to ensure its in the same place no matter the screen size?

    Here is what it looks like on his phone:

    https://drive.google.com/file/d/1dYiF6rNWeFD3J24_ulsOWHMVBiJzsp5J/view?usp=sharing

    Here is what it looks like on mine:

    https://drive.google.com/file/d/1dwkKdwkS81N3L2A6rzJuA30mk0tmHkVz/view?usp=sharing

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author megamenu

    (@megamenu)

    Hi nvictur,

    “I thought that the design of the mega menu will automatically put it as far right as possible no matter what the screen”

    – That’s not correct – MMM doesn’t have control over the position of the menu, it is your theme that decides that. Therefore, we need to change your theme CSS to correct the position of the menu. I think this should work:

    .hgroup-right {
    padding-left: 0;
    padding-right: 0;
}
.hgroup-right .navbar {
    min-width: 100%;
}

    Regards,
    Tom

    Thread Starter nvlctur

    (@nvlctur)

    Thanks – where do I put this in? Im not familiar with CSS.

    Do I put this into the Additional CSS in the customize option?

    Thread Starter nvlctur

    (@nvlctur)

    Hi again

    I applied this in additional CSS. Problem this creates is on my desktop site – I have a button to the right of the navbar on the desktop site – when I apply your code, it pushes the button underneath it and looks untidy.

    Plugin Author megamenu

    (@megamenu)

    Hi nvlctur,

    You can use a media query to make sure the CSS is only applied to smaller screens:

    @media only screen and (max-width: 600px) {
    .hgroup-right {
        padding-left: 0;
        padding-right: 0;
    }
    .hgroup-right .navbar {
        min-width: 100%;
    }
}

    (adjust the 600px value so that it applies where you need it to apply)

    Regards,
    Tom

    Thread Starter nvlctur

    (@nvlctur)

    Great thanks, works like a dream.

    Another issue with the placement of the mobile menu – you might notice that on the mobile side, the mobile menu is not exactly centered with the logo. There is no padding or border on the logo so it should be centered.

    How can I achieve this? The mobile menu icon is slightly higher than centered on the logo.

    Sounds pedantic I know, but this is the clients request so I need to honor it.

    Plugin Author megamenu

    (@megamenu)

    Hi nvictur,

    I’ve checked the html and css and it is already centered for me:

    2020-10-02_10-27-52

    Regards,
    Tom

    Thread Starter nvlctur

    (@nvlctur)

    Thanks – It seemed ok to me too, think its just his phone (iphone) – I dont know.

    Plugin Author megamenu

    (@megamenu)

    Ok, maybe he needs to clear his browser cache.

    Regards,
    Tom

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Mobile Menu toggle not in same position’ is closed to new replies.