Hide specific menu location on desktop devices

[michaelsoeldner]

Hello! First of all: Respect. Very good support. I found everything i needed so far.

But now i have a specific question. I created a new menu location in the functions.php of my child theme with the following code:

register_nav_menu( ‘mobile-menu’ , ‘Mobile Menu’ );

then I added another code in the header.php of my child theme:

x_get_view( ‘header’, ‘base’ );
wp_nav_menu( array(
‘theme_location’ => ‘mobile-menu’
/* other settings */
) );

Then I assigned a menu to that specific location. After that I wanted to hide the topbar and primary menu on mobile devices with custom css and added the following code:

@media (max-width: 979px) {
.x-topbar {
display: none;
}
}
@media (max-width: 979px) {
.x-navbar {
display: none;
}
}

so far everything worked well. Now i want to hide the new location i made (with modifying my child theme) on desktop devices. Can you help me with the custom css? I’m a newbie if it comes to this. I would give you the url, but the website isn’t live yet. If you need further information, please let me know.

Thank you very much.

[mldarshana]

Hi Michael,

Thanks for writing in! You can assign a class to your custom menu, for example my-mobile-menu.

<?php wp_nav_menu( array( 'theme_location' => 'mobile-menu', 'container_class' => 'my-mobile-menu',) ); ?>

Then you can use that class to target your menu to hide or show on different device widths.

For example:

@media (min-width:768px){
  .my-mobile-menu {
    display:none;
  }
}

Hope that helps.

[michaelsoeldner]

Thanks for the help!

Where exactly can I assign a class to my custom menu?

Best Regards!

[nabeel]

Hi again,

In the header.php file of your child theme, please replace this part of code:

x_get_view( 'header', 'base' );
wp_nav_menu( array(
'theme_location' => 'mobile-menu'
/* other settings */
) );

With this:

x_get_view( 'header', 'base' );
wp_nav_menu( array(
'theme_location' => 'mobile-menu',
'container_class' => 'my-mobile-menu'
/* other settings */
) );

To learn more about wp_nav_menu function please see https://developer.wordpress.org/reference/functions/wp_nav_menu/

Hope this helps!

[michaelsoeldner]

Thank you very much. Everything worked.

Have a nice day!

[jade]

You’re welcome, Michael.