Top Level Menu Height and Background Color

  • Hi. Hopefully I can explain my issue properly.
    I’m using the grid layout.
    Everything looks/works the way I expected on desktop view.
    On iphone, menu properly collapses to hamburger menu and display one column on the left when opened and looks/works fine.

    On ipad, menu also collapses to hamburger menu. When it is selected, the desktop style menu bar opens (which is fine) but the top level menu bar and background color extends the entire height of the screen (ie, an overlay?).

    Is there some CSS I can use to reduce the height so that it is the height of the sub-menu grid displayed? Basically to have the top level menu bar display the same way it does on desktop view.

    Thanks in advance for your help.

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

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

    (@megamenu)

    Hi baponline,

    I think the best thing to do would be to synchronise the MMM responsive breakpoint with the theme responsive breakpoint.

    Please go to Mega Menu > Menu Themes > Mobile Menu and set the Responsive Breakpoint to:

    64em

    Regards,
    Tom

    • This reply was modified 4 years, 11 months ago by megamenu.
    Thread Starter baponline

    (@baponline)

    Thanks for the quick response.
    I gave that a try and it definitely produces the mobile phone-like menu along the left side on the ipad now.

    However, the top level menu bar background color still overlays the entire length of the screen; it’s just that the width of it is smaller now; just the width of the sidebar menu. It is that way on the phone as well, it’s just that it isn’t as noticeable due to the screen size.

    Thinking it must be something in the theme (Bento) that I would have to modify via CSS.

    Plugin Author megamenu

    (@megamenu)

    Hi baponline,

    The Responsive Breakpoint still looks like it is set to 600px?

    Please can you set it to 64em, then post a screenshot which shows the issue? It appears to be working how I’d expect it to here, but maybe I am not looking at the right thing.

    Regards,
    Tom

    Thread Starter baponline

    (@baponline)

    Sorry about that. I tested it in a staging area
    Temporarily made the change on the website so you can see it.

    Sorry for my ignorance but cannot figure out how to post screenshot.

    Plugin Author megamenu

    (@megamenu)

    Hi baponline,

    You can use a program like this to take screenshots:

    https://www.techsmith.com/jing-tool.html

    Here is what I’m seeing on all screen sizes below 64em:

    https://screencast.com/t/QQwOEGB6yz

    Is that what you’re referring to?

    The width of the menu jumps around when you open sub menus, but you can fix this with this CSS:

    #nav-mobile {
   width: 300px;
}

    Regards,
    Tom

    Thread Starter baponline

    (@baponline)

    Sorry for the delay in responding.

    Yes the screenshot you provided is what I’m seeing and what I was referring to.

    I added the nav-mobile CSS recommended and that definitely helps with the menu width on mobile.

    Now another question…
    Everything now looks ok on desktop and mobile phone.
    And it is fine on tablet (ipad) when in portrait mode. However, when in landscape mode the menu appears at the top and is the full width of the screen. It does not show as a hamburger menu. How do I change that?

    Thanks for your help.

    Plugin Author megamenu

    (@megamenu)

    Hi baponline,

    You would need to check your theme settings to see if it is possible to configure the width at which your theme switches from desktop mode to mobile mode (usually referred to as the breakpoint/mobile breakpoint/responsive breakpoint). If it is hard coded then you would need to ask your theme authors for help with that. Once the breakpoint for your theme is updated, remember to update the Responsive Breakpoint in your menu theme to match.

    Regards,
    Tom

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Top Level Menu Height and Background Color’ is closed to new replies.