Mobile Menu Configuration

Knowledgebase Docs » UberMenu 3
USEFUL? 15
UberMenu 3

UberMenu Mobile Menu

Currently in the demo (since v3.7), the following non-default settings are used:

Mobile Menu Display Mode

The Mobile Menu Display Mode setting is set to Modal

In the Mobile Modal Settings > Header Content setting, the custom markup for the logo and button looks like this:

<div>
  <img src="/path-to-your-image.jpg" alt="logo">
  <a href="yoursite.com/your-link" class="button-mobile">Get UberMenu</a>
</div>

and the CSS used to style it:

.ubermenu.ubermenu-main .ubermenu-mobile-header > div {
    width:100%;
    display: flex;
    justify-content:flex-start;
    align-items:center;
}
.ubermenu.ubermenu-main .ubermenu-mobile-header img {
    padding: 20px;
    width: 100px
}
.ubermenu.ubermenu-main .ubermenu-mobile-header .button-mobile{
    background:#2ab2a4;
    color:white;
    padding:.7em .8em;
    margin-left:auto;
    margin-right:15px;
}

which can be added in the CSS Tweaks setting.

Mobile Submenu Type

For use with the Modal mode, the Mobile Submenu Type setting is set to Accordion

Responsive Toggle Placement

(Optional, consider if you have an issue with your responsive toggle positioning on mobile)

By default, the mobile toggle will appear just before the menu. Switching the menu to modal mode decouples the menu positioning from the layout, and with the Responsive Toggle settings, you can do the same with the toggle. A few common scenarios:

Adding a toggle in a custom location

If the default toggle location doesn’t work for you, you can disable the “Responsive Toggle” setting and add your own Custom Toggle within your theme layout.

Toggle is hidden on mobile, or a double toggle

If the theme hides UberMenu and/or the responsive toggle on mobile, or you end up with a double toggle (the theme’s wrapping UberMenu’s) a quick solution without having to edit the theme files to integrate is to switch the Mobile Menu Display Mode to Modal and the Responsive Toggle Placement to Fixed, which will move the toggle outside of the theme’s containers and position it in a fixed position.

In this case, you may also want to hide the theme’s toggle with CSS.