Changing the Mobile Menu Threshold using Smart Menus

[scrambler]

IMPORTANT:

The latest version of Xtreme Now has that functionality built in, with the “Menu Mobile/Desktop Switch Point: ” Option at the top of the menu option page.

The only reason you may still want to use the complex solution below is if you wanted to only change the threshold of one menu, as the Theme option affects ALL menus.

If you do use the method below, DO NOT mix it with the theme option.

---

There have been requests for a way to change the threshold for the Mobile menu.

The Standard menu used in Xtreme could not accommodate that request.

The latest version of Xtreme (1.1.3 and after) and of the Plus plugin (1.1 and later) add support for new menus called SmartMenus (top of Main options > Menus )

The Smart Menus do seem to be able to accommodate a Custom CSS Solution (at least when using base options).

Below are two sets of CSS that you can try (to be added to Main options > Fonts & Custom > Custom CSS Rule box)

Here is how to use these Custom CSS blocks to change the mobile menu threshold.

1) If you want to make the Mobile menu appear at width larger than 768px, ONLY use the block of CSS named Smart-Mobile-Menu.css

2) If you want to make the Desktop Menu bar stay on at width under 768px, ONLY use the block of CSS named Smart-Desktop-Menu-Bar.css

3) Paste the CSS in a dumb editor (not something like word that would risk adding some invisible formating characters) , something like Notepad or an HTML CSS editor like notepad ++, AND READ THE HEADER INSTRUCTIONS !!!.

Depending what menu you want to affect, you will need to replace .menu-primary by something else everywhere in the CSS.

Use a search and replace to make sure you dont miss any, especially in rules with multiple selectors!

4) Then copy paste the content of the whole block of CSS as is (you want to keep all the comments as it will make any changes easier), and paste it in Main Options > Fonts & Custom > Custom CSS Rule box.

Post back on the forum with a link if there are any issues or need to fine tune.

Be aware that I may have limited time on the forum in the next few weeks, so if you have issues you will need to be patient.

Blocks of CSS are in the next post, use only the part highlighted in color

[scrambler]

Smart-Mobile-Menu.css

---

/*CUSTOM CSS To activate SMART Mobile Menu at width over 768px
– THIS CSS ONLY APPLIES TO SMART MENUS!
– If you want to affect all menu using primary style leave as is
– To affect all menus using secondary style, replace .menu-primary  by .menu-secondary  in all the rules
– To affect only a specific menu, inspect your page to find the menu ID, and replace .menu-primary by #YourMenuId in all the rules
 Typical menu IDs include:
 For Main menu bars
  #nav-primary
  #nav-secondary
 For Extra menus (n will be a number)
  #primary-xn
  #secondary-xn
  #extra-xn
– Change 1200px in the media rule below to the value you need. If you want to keep the Mobile Menu Bar on all devices, use 8000px, or simply remove “(max-width: 1200px) and”
*/

@media screen and (max-width: 1200px) and (min-width:768px) {
/*BLOCK-1 General rules*/
.menu-primary .wvrx-menu-clear {clear:both;}
.menu-primary .wvrx-menu-container {padding-bottom:.5em;}

/*BLOCK-2- Standard Smart Menu Mobile rules*/
.menu-primary ul.wvrx-menu.sm{width:auto !important;}
.menu-primary ul.wvrx-menu.sm ul{display:none;position:static !important;top:auto !important;left:auto !important;margin-left:0 !important;margin-top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;}
.menu-primary ul.wvrx-menu.sm>li{float:none;}
.menu-primary ul.wvrx-menu.sm>li>a, .menu-primary ul.wvrx-menu ul.sm-nowrap>li>a{white-space:normal;}
.menu-primary ul.wvrx-menu.sm iframe{display:none;}

.menu-primary .wvrx-menu.sm li {
 border-top:  1px solid rgba(255, 255, 255, 0.4);
}
.menu-primary .wvrx-menu.sm > li:first-child {
 margin-top:  .75em;
}
.menu-primary .menu-type-accordion .wvrx-menu.sm > li:first-child {
 margin-top:  .75em;
}
.menu-primary .wvrx-menu.sm ul a {
 border-left: 1em solid transparent;
}
.menu-primary .wvrx-menu.sm ul ul a {
 border-left: 2em solid transparent;
}
.menu-primary .wvrx-menu.sm ul ul ul a {
 border-left: 3em solid transparent;
}
.menu-primary .wvrx-menu.sm ul ul ul ul a {
 border-left: 3.75em solid transparent;
}
.menu-primary .wvrx-menu.sm ul ul ul ul ul a {
 border-left: 4.5em solid transparent;
}
.menu-primary .wvrx-menu.sm ul ul ul ul ul ul a {
 border-left: 5.25em solid transparent;
}

.menu-primary .wvrx-menu-button {
 cursor:    pointer;
 float:    left; 
 display:   inline;
 margin-left:  .75em;
 margin-right:  .75em;
}
.menu-primary .wvrx-menu-button span {
 font-size:   120%;
}
.menu-primary .wvrx-menu-container ul.collapsed { /* tricky – start ALL menus collapsed, but uncollapse individually in script */
 display:   none;
}

/*BLOCK-3-Smart Menu Desktop Rules that need to be overriden*/
.menu-primary .wvrx-menu.sm ul a span.sub-arrow:after {      
 content:   “f502”;
 font-family:  “Genericons”;
 font-size:   100%;
 font-style:   normal;
 position:   absolute;
 top:    1.1em;              
 right:     -1.0em;
 margin-right:  1.5em;
 border:    none;
}
/*overriding custom options*/
.menu-primary .wvrx-menu-container {text-align:left;}
.menu-primary.menu-type-standard .wvrx-menu.sm li a span.sub-arrow:after{font-size:130%!important;top:1.1em;left:auto;margin-right:1.5em;} /*centered down arrow*/
.menu-primary.menu-type-standard .sm > li > ul:after{border-bottom-color:transparent;border-width:0px;margin-left:0px;}
.menu-primary.menu-type-standard .sm > li > ul:before{border-bottom-color:transparent;border-width:0px;margin-left:0px;}
.menu-primary.menu-type-standard .wvrx-menu.sm li .has-submenu,.menu-primary.menu-type-standard .wvrx-menu.sm li .childrenx{padding-left:0.75em;}
}
/*END OF CUSTOM CSS To activate Mobile Menu at width over 768px*/

Smart-Desktop-Menu-Bar.css

---

/*CUSTOM CSS To keep SMART Desktop Menu Bar at width below 768px
– THIS CSS ONLY APPLIES TO SMART MENUS!
– If you want to affect all menu using primary menu bar style leave as is
– To affect all menus using secondary style, replace .menu-primary  by .menu-secondary  in all the rules
– To affect only a specific menu, inspect your page to find the menu ID, and replace .menu-primary by #YourMenuId in all the rules
 Typical menu IDs include.
 For Main menu bars:
  #nav-primary
  #nav-secondary
 For Extra menus (n will be a number):
  #primary-xn
  #secondary-xn
  #extra-xn
– Change 600px in the media rule below to the value you need. If you want to keep the Desktop Menu Bar on all devices, use 0px
– If you are using special Smar Menu Options, you may need some cof the rules in Block 2  to be uncommented, or even more.
*/
@media screen and (min-width: 600px) and (max-width:767px) {
/*BLOCK-1 General rules*/
.menu-primary .wvrx-menu-clear {clear:none;}
.menu-primary .wvrx-menu-container {padding-bottom:0;}
/*Menu centering rules*/
.menu-primary .menu-alignright {float:right;}
.menu-primary ul.wvrx-center-menu.sm {display:inline-block !important;}

/*BLOCK-2-SPecific case by case rules uncomment as needed*/
/*Rule below must only be added if menu is centered*/
/*.menu-primary .wvrx-menu-container {text-align:center;} */

/* Rules below may be needed depending what options you used for the Smart menu in the Plus option page*/
/*.menu-primary.menu-type-standard .sm > li > ul:before,.menu-primary.menu-type-standard .sm > li > ul:after{
bottom:100%;left:33px;border:solid transparent;content: ”;height:0;width:0;position: absolute;}
.menu-primary.menu-type-standard .sm > li > ul:after{border-bottom-color:#54A1D4;border-width:8px;margin-left:-8px;}
.menu-primary.menu-type-standard .sm > li > ul:before{border-bottom-color:#222;border-width:9px;margin-left:-9px;}.menu-primary.menu-type-standard .wvrx-menu.sm li a span.sub-arrow:after{font-size:70%!important;top:80%;right:44%;margin:0;}
.menu-primary.menu-type-standard .wvrx-menu.sm ul a span.sub-arrow:after{top:33%;right:-1.0em;left:auto;margin-right:1.5em;}
.menu-primary.menu-type-standard .wvrx-menu.sm li .has-submenu,.menu-primary.menu-type-standard .wvrx-menu.sm li .childrenx{padding-right:1em;padding-left:0.75em;}
.menu-primary.menu-type-standard .wvrx-menu.sm ul .has-submenu,.menu-primary.menu-type-standard .wvrx-menu.sm ul .children{padding-right:2.0em;}
*/
/*BLOCK-3- Standard Smart Menu Desktop rules*/
.menu-primary .wvrx-menu.sm ul a span.sub-arrow:after {   
 content:   “f501”;
 font-family:  “Genericons”;
 font-size:   85%;
 font-style:   normal;
 position:   absolute;
 top:    33%;
 right:     -1.0em;
 margin-right:  1.5em;
 border:    none;
}

.menu-primary .wvrx-menu.sm .has-submenu {
 padding-right:  2.0em;
}

/*BLOCK-4-Smart Menu Mobile Rules that need to be overriden*/
.menu-primary ul.wvrx-menu.sm{width:auto !important;}
.menu-primary ul.wvrx-menu.sm ul{position:absolute !important;display:none;}
/*We loose the ability to auto shift menus when they come out of the browser, because mobile rule force the positionning
 with important so the javascript dynamic positionning values cannot work*/
.menu-primary ul.wvrx-menu.sm ul ul{left:100% !important;top:0px !important;} /*use -100% for sub menu to open on the left or add a single rule for the last menu*/
.menu-primary ul.wvrx-menu.sm>li{float:left;}
.menu-primary ul.wvrx-menu.sm>li>a,.menu-primary ul.wvrx-menu ul.sm-nowrap>li>a{white-space:normal;}
.menu-primary ul.wvrx-menu.sm iframe{display:none;} /*not sure what that is for not corrected*/

.menu-primary .wvrx-menu.sm li {
 border-top:  none;
}
.menu-primary .wvrx-menu.sm > li:first-child {
 margin-top:  0 !important;
}

.menu-primary .wvrx-menu-button {
 display:  none;
 margin-top:  0.55em;
}
.menu-primary .wvrx-menu-container ul.collapsed { /* tricky – start ALL menus collapsed, but uncollapse individually in script */
 display:   block;
}

.menu-primary .wvrx-menu.sm ul a {
 border-left:none;
}
.menu-primary .wvrx-menu.sm ul ul a {
 border-left:none;
}
.menu-primary .wvrx-menu.sm ul ul ul a {
 border-left:none;
}
.menu-primary .wvrx-menu.sm ul ul ul ul a {
 border-left:none;
}
.menu-primary .wvrx-menu.sm ul ul ul ul ul a {
 border-left:none;
}
.menu-primary .wvrx-menu.sm ul ul ul ul ul ul a {
 border-left:none;
}

/*BLOCK-5- Mobile rules from the general pool that need to be overriden*/
.is-mobile .menu-primary .wvrx-menu-container ul li.menu-item:first-child,
.is-mobile  .menu-primary.wvrx-menu-container ul.weaverx-theme-menu li:first-child{
 margin-top:  0;
}
}
/*END OF CUSTOM CSS To keep Desktop Menu Bar at width below 768px

[Author]

Posts