[Peter MParticipant]

Hi! I have two questions about the navbar menu on mobiles, and am hoping you can help me with them:

Is there a way to change the primary menu in the navbar when the device is a mobile? I have created a new menu, labelled “Mobile Menu” and am wondering if there is any way to switch from my “normal” Primary menu and use the Mobile as primary. My current primary menu has 7 links, but the Mobile menu has only 3 (the 2 most important for mobiles plus an “Other” with submenu showing the remaining 4 links).

I am using Renew, basic installation no demo codes.

And, a related question, is it possible to show one link, with submenus, with the Mobile menu item is pressed?

Many thanks in advance,

Peter

[ChristopherModerator]

Hi there,

#1 Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

Copy _nav-primary.php file from framework -> views -> global and put it in the same path inside child theme, Now replace existing code with this:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<a href="#" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <i class="x-icon-bars"></i>
  <span class="visually-hidden"><?php _e( 'Navigation', '__x__' ); ?></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php
                    wp_nav_menu( array(
                      'menu' => 'Mobile Menu',
                      'container'      => false,
                      'menu_class'     => 'x-nav sf-menu',
                    ) );
               ?>
</div>

Instead of Mobile Menu in provided code put your menu name.

#2 Yes, you can link submenu items to content bands.

Hope it helps.

[Peter MParticipant]

Wow! Thank you for your quick and very helpful reply! And, of course, it works a treat!

And thanks for the customisation advice (I had read it and had set up my child theme – your advice and how to on all of that is excellent).

Now, one other (new post?) on this theme, if I may: What if, at a certain size, I want to skip the mobile navicon, and go straight to the link bars across the page? How do I manage that in X, please?

I am happy to raise a new post, if I need to!

Best wishes,

Peter

[ChristopherModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[Peter MParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,
Try adding following CSS under Appearance > Customize > Custom > CSS:

@media (max-width: 979px) {
	.x-nav-wrap.mobile.collapse {
		display: block;
	}
	.masthead-inline .x-btn-navbar {
		display: none;
	}
}

Hope it helps.

[Peter MParticipant]

It seems to have worked a treat!!

I am very impressed with your support, thank you.

Best wishes to you all,

Peter

[NicoModerator]

Glad to hear that.

Let us know if you need anything else.

Thanks. Have a great day! 🙂

[jessicaParticipant]

Hi! I followed the steps for a custom mobile menu. Everything seemed to work fine, except instead of the mobile icon that’s normally present, now there’s just an empty white box. What’s going on?

[jessicaParticipant]

This reply has been marked as private.

[jessicaParticipant]

Figured it out. Just changed the second line of code from:
<i class="x-icon-bars"></i>
to:

<i class="x-icon-bars" data-x-icon=""></i>

Hope that helps someone!

[ChristopherModerator]

Thanks for sharing.

[Author]

Posts