↓
 
Home→Type→Advanced Topics→Mobile Menu: Advanced Customizations

Mobile Menu: Advanced Customizations

Weaver Xtreme Guide Posted on by
This tutorial regroups the following Mobile Menu Customizations
  1. Changing the alignment of Hamburger Icon (3 bars)
  2. Limiting the width of the mobile menu and/or moving it to the right
  3. Style Mobile menu horizontal divider lines differently for each menu
  4. Add a Menu label beside the Hamburger Icon On mobile
  5. Make the Slide open Mobile Menu display in 2 columns on small tablets
In the various examples below, you can use some of the Menu selectors below to specialize Custom CSS rules to a specific Menu. Menus styles selectors: .menu-primary .menu-secondary .menu-extra Typical menu IDs (Inspect your page with your browser developer tool to find it) include: For Main menu bars #nav-primary #nav-secondary For Extra menus (n will be a number) #primary-xn #secondary-xn #extra-xn

1) Changing the alignment of Hamburger Icon (3 bars) (Standard Menu)

By default, the Mobile menu "Hamburger" icon (3 bars) is always on the left of the Menu bar, regardless of the alignment you chose for the menu bar. If you want to change that and make the icon respect the alignment chosen for the menu bar add one of the rules below in Main Options > Fonts & Custom > Custom CSS Rule box To align it right 
.menu-toggle-button {float:right;} /*-aligns it right*/
To center it 
.wvrx-menu-container {text-align:center;} /*-Centers it*/
.menu-toggle-button {float:none;} /*-centers it*/
Note1: If you have several menu bars in your page you should add the menu ID or class selector (see top of this post) at the beginning of the rule like below for the primary menu bar 
#nav-primary .menu-toggle-button {float:right;} /*aligns it right*/
Note2: If you want to center the Sub menus Add 
.is-mobile-menu.menu-arrows {text-align: center;}

1a) Changing the alignment of Hamburger Icon (3 bars) (Smart Menu)

The above does not apply when you have selected the Smart Menu option. Use the following for Smart Menus: 
.is-menu-mobile .wvrx-menu-button  {float:right;}

2) Limiting the width of the mobile menu and/or moving it to the right

The slide open mobile menu is always full width and left aligned. If you want it to be right aligned with a limited width, you can use the rules below in the Main Custom CSS Rule Box.
Making sub menu right aligned
mobile-right 
/* Align sub menu right */
.menu-primary .menu-arrows.is-mobile-menu {text-align:right;float:right;width:100%;}
.is-mobile .wvrx-menu ul {text-align:right;}
/* adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li.has-submenu > a {padding-right:2.5em;}
.is-mobile .menu-primary .menu-arrows .toggle-submenu::after {margin-right:0.4em;}
.is-mobile .menu-primary .menu-arrows .toggle-submenu {width:2em;}
CSS if using the Smart Menu
/* Smart Menus Align sub menu right */
.is-menu-mobile ul.wvrx-menu.sm {text-align:right;float:right;}
.is-mobile .wvrx-menu ul, .is-mobile .wvrx-menu a {text-align:right !important;}

/* Smart Menus adjust sub menu arrows */
.is-mobile .menu-primary .wvrx-menu li > a.has-submenu {padding-right:2em;}
.is-mobile .menu-primary .wvrx-menu.sm a span.sub-arrow::after {margin-right:1.5em;}
 
Limiting the width of the Sub Menu
mobile-right-limited 
/* removes full width BG */
.is-mobile .menu-primary .wvrx-menu-container {background-color:transparent;}
/* Limit width, use value, or no with for automatic width*/
.menu-primary .menu-arrows.is-mobile-menu {width:300px;}
/*apply limited BG, set hamburger icon alignment */
.menu-primary .menu-arrows.is-mobile-menu {background-color:#ffeebb;}
.menu-primary .menu-toggle-button {width:100%;background-color:#ffeebb;padding-bottom:.5em;text-align:left}
/* removes space above first sub menu */
.is-mobile.is-menu-default .wvrx-menu-container ul li:first-child.menu-item, 
.is-mobile.is-menu-default .wvrx-menu-container ul.weaverx-theme-menu li:first-child, 
.is-menu-mobile .wvrx-menu-container ul li:first-child.menu-item, 
.is-menu-mobile .wvrx-menu-container ul.weaverx-theme-menu li:first-child {margin-top:0px;}
  - Replace #ffeebb in the rles above by the background color you want. - To let the width be the widest item, remove width:300px; for a fixed width use the value you want - If you are using content in one of the ADD right/left HTML and you want it on the menu bar, some additional CSS will be required. - Replace .menu-primary by the appropriate selector if the menu is not using the primary style. See menu selectors at the top of this tutorial

3) Style Mobile Menu horizontal divider lines differently for each menu

The Horizontal line dividers for the slide open mobile menu is done by the rule below 
.menu-arrows.is-mobile-menu ul li:first-child a, .menu-arrows.is-mobile-menu a {
border-top:1px solid rgba(255, 255, 255, 0.2);
}
  If you need to change it for a specific menu, add the menu ID selector in front of each selector. Example below for primary menu bar 
#nav-primary .menu-arrows.is-mobile-menu ul li:first-child a, 
#nav-primary .menu-arrows.is-mobile-menu a {
border-top:1px solid rgba(255, 255, 255, 0.2);
}
 

4) Add a Menu label beside the Hamburger Icon On mobile

Xtreme has a box to replace the "Hamburger" Icon by any HTML you want. It is located in: Customizer: Appearance > Customize > Style, Border… > Menus > Style for All menus > Mobile Menu “Hamburger” Label Legacy Admin: Appearance > Weaver Xtreme Admin > Main options > Menus > Options: All Menus > Mobile Menu “Hamburger” Label The hamburger Icon uses the Genericon 419 The HTML to insert it is: 
<span class="genericon genericon-menu"></span>
So to place any text or image along with it use something like: 
<span style="vertical-align:inherit" class="genericon genericon-menu">
</span><span style="color:red; padding-left:10px">Menu</span>

5) Make the Slide open Mobile Menu display in 2 columns on small tablets

mobile-column On a Small tablet, the mobile menu can be quite large. If you have many menu items, you end up with a long menu and wasted space on the right. The rules below added to the Global Custom CSS rule box, will distribute the Mobile menu items on two columns to optimize its layout. 
@media screen and (min-width:581px) and (max-width:767px) {
ul.sm.wvrx-menu > li, ul.wvrx-menu > li {float:left !important;width:50%;}
ul.sm.wvrx-menu > li:nth-of-type(2n+1), ul.wvrx-menu > li:nth-of-type(2n+1) {clear:both;}
ul.sm.wvrx-menu > li:nth-of-type(2), ul.wvrx-menu > li:nth-of-type(2) {margin-top:0.5em;}
}
Notes:
  • If you want it on phones too, remove the first part of the @media rule (and (min-width:581px))
  • If you need to restrict this to a specific menu style or individual menu, you will need to add the specific selector in front of the rules (make sure to do that on each selector as there are more than one on each rule)
For example the CSS below will only affect menu using the primary style 
@media screen and (min-width:581px) and (max-width:767px) {
.menu-primary ul.sm.wvrx-menu > li, .menu-primary ul.wvrx-menu > li {float:left;width:50%;}
.menu-primary ul.sm.wvrx-menu > li:nth-of-type(2n+1), .menu-primary ul.wvrx-menu > li:nth-of-type(2n+1) {clear:both;}
.menu-primary ul.sm.wvrx-menu > li:nth-of-type(2), .menu-primary ul.wvrx-menu > li:nth-of-type(2) {margin-top:0.5em;}
}

Comments are closed.

↑