Zerif Lite (themeisle) - Theme Integration

Zerif Lite includes custom CSS that integrates Max Mega Menu and positions the mobile toggle button alongside the site title/logo.

In general, no theme edits are required.

If you want to display the Max Mega Menu toggle bar on a new row below your site logo, use the following steps.

These steps are optional.

Step 1

Go to Mega Menu > Menu Themes > Mobile Menu and set the following:

Disable Mobile Toggle: unchecked
Responsive Breakpoint: 767px.

Step 2

Go to Mega Menu > Menu Themes > Custom Styling and add the following:

@include mobile {
    .mega-menu-primary #mega-menu-wrap-primary .mega-menu-toggle {
         position: relative;
         right: auto;
         top: auto;
         @include background($toggle_background_from, $toggle_background_to);
         border: 0;
         border-radius: 2px;
         height: auto;
         transition: none;
     }
}

@include mobile {

.mega-menu-primary #mega-menu-wrap-primary .mega-menu-toggle {

position: relative;

right: auto;

top: auto;

@include background($toggle_background_from, $toggle_background_to);

border: 0;

border-radius: 2px;

height: auto;

transition: none;

}

The above CSS will place the toggle bar at full width below the site logo.

Hide theme logo on mobile

If you want to remove the site logo (so you can use the Logo mobile toggle block option), add the following CSS:

@include mobile {
    .navbar-brand {
        display: none !important;
    }
}

@include mobile {

.navbar-brand {

display: none !important;

}

Max Mega Menu Documentation

Zerif Lite

Push Mobile Menu onto it’s own row

Step 1

Step 2

Hide theme logo on mobile

Max Mega Menu Documentation

Zerif Lite

Push Mobile Menu onto it’s own row

Step 1

Step 2

Hide theme logo on mobile

Related Articles