Mobile Menu Configuration

Knowledgebase Docs » UberMenu 3
USEFUL? 4
UberMenu 3

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

Mobile Menu Display Mode

The Mobile Menu Display Mode is set to Modal

In the 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 is set to Accordion