How can I change the menu on mobile

[Romain]

Hi, i want to make a custom menu different from my primary one. How can I do it ?

 

Thanks

[Amir Rather]

<div data-identifyelement=”329″>Unfortunately, it’s not possible to define a menu for Mobile. However, there is a workaround that I believe you can apply and get benefit from it.</div>
<div data-identifyelement=”330″></div>
<div data-identifyelement=”331″>Let’s say you’re using Primary Navigation on Desktop. The workaround is, adding the mobile menu inside the Primary menu (merging) but with adding “only-mobile” classes like this: http://prntscr.com/mxcmk1.</div>
<div data-identifyelement=”333″></div>
<div data-identifyelement=”334″>Also, you have to add the following code in <b data-identifyelement=”335″>Theme Options > Advanced > Custom CSS</b>:</div>
<div data-identifyelement=”336″></div>
<div data-identifyelement=”337″>.only-mobile {</div>
<div data-identifyelement=”338″> display: none;</div>
<div data-identifyelement=”339″>}</div>
<div data-identifyelement=”340″></div>
<div data-identifyelement=”341″>@media handheld, only screen and (max-width: 1200px) {</div>
<div data-identifyelement=”342″> .only-mobile {</div>
<div data-identifyelement=”343″>  display: block !important;</div>
<div data-identifyelement=”344″> }</div>
<div data-identifyelement=”345″>}</div>
<div data-identifyelement=”346″></div>
<div data-identifyelement=”347″>To hide desktop menu items on mobile, add the class “only-desktop” to desktop menu items and this code in <b data-identifyelement=”348″>Custom CSS</b>:</div>
<div data-identifyelement=”349″></div>
<div data-identifyelement=”350″>@media handheld, only screen and (max-width: 1200px) {</div>
<div data-identifyelement=”351″> .only-desktop {</div>
<div data-identifyelement=”352″>  display: none !important;</div>
<div data-identifyelement=”353″> }</div>
<div data-identifyelement=”354″>}</div>
<div data-identifyelement=”355″></div>
<div data-identifyelement=”356″>In this way, your menu item will only be visible in mobile (the ones that have .only-mobile class).  As I said, this is a workaround at the moment and it’s based on merging 2 menus together and hiding/showing in different devices widths.</div>
<div data-identifyelement=”357″></div>
<div data-identifyelement=”359″>Let us know if you need more help.</div>
<div data-identifyelement=”360″></div>

[Amir Rather]

<div data-identifyelement=”329″>Unfortunately, it’s not possible to define a menu for Mobile. However, there is a workaround that I believe you can apply and get benefit from it.</div>
<div data-identifyelement=”330″></div>
<div data-identifyelement=”331″>Let’s say you’re using Primary Navigation on Desktop. The workaround is, adding the mobile menu inside the Primary menu (merging) but with adding “only-mobile” classes like this: http://prntscr.com/mxcmk1.</div>
<div data-identifyelement=”333″></div>
<div data-identifyelement=”334″>Also, you have to add the following code in <b data-identifyelement=”335″>Theme Settings  > Custom CSS</b>:</div>
<div data-identifyelement=”336″></div>
<div data-identifyelement=”337″>.only-mobile {</div>
<div data-identifyelement=”338″> display: none;</div>
<div data-identifyelement=”339″>}</div>
<div data-identifyelement=”340″></div>
<div data-identifyelement=”341″>@media handheld, only screen and (max-width: 1200px) {</div>
<div data-identifyelement=”342″> .only-mobile {</div>
<div data-identifyelement=”343″>  display: block !important;</div>
<div data-identifyelement=”344″> }</div>
<div data-identifyelement=”345″>}</div>
<div data-identifyelement=”346″></div>
<div data-identifyelement=”347″>To hide desktop menu items on mobile, add the class “only-desktop” to desktop menu items and this code in <b data-identifyelement=”348″>Custom CSS</b>:</div>
<div data-identifyelement=”349″></div>
<div data-identifyelement=”350″>@media handheld, only screen and (max-width: 1200px) {</div>
<div data-identifyelement=”351″> .only-desktop {</div>
<div data-identifyelement=”352″>  display: none !important;</div>
<div data-identifyelement=”353″> }</div>
<div data-identifyelement=”354″>}</div>
<div data-identifyelement=”355″></div>
<div data-identifyelement=”356″>In this way, your menu item will only be visible in mobile (the ones that have .only-mobile class). As I said, this is a workaround at the moment and it’s based on merging 2 menus together and hiding/showing in different devices widths.</div>
<div data-identifyelement=”357″></div>
<div data-identifyelement=”359″>Let us know if you need more help.</div>
<div data-identifyelement=”360″></div>

[Author]

Posts