[Support request] Display Menu Items on Menu Bar – Mobile Devices

[Martin]

Hi Tom,

By default, all menu items are buried under hamburger menu when viewing on a mobile device. Is there a way to show certain items on menu bar?

1)
I want to put 3 or 4 most important menu items on mobile menu bar and hide other items under hamburger slideout menu. I can achieve this on desktop by putting most important items on primary menu and the rest on slideout menu, but not sure how to do it on mobile.

2)
Also some menu items which are important on desktop are not important on mobile and vice versa. Thus I need to hide certain desktop items from mobile view and some mobile items from desktop view. In other words: I need to set some items to be displayed on desktop only, some on mobile only and some on both desktop and mobile.

Thanks,
Martin

[Tom]

Hi Martin,

You can add HTML into the mobile menu bar using a function like this:

add_action( 'generate_inside_mobile_menu_bar','tu_add_mobile_bar_items' );
function tu_add_mobile_bar_items()
{
	?>
	<a href="#"><i class="fa fa-facebook"></i></a>
	<a href="#"><i class="fa fa-twitter"></i></a>
	<?php
}

This does require that you have the navigation search option activated, as these items are added inside the same wrapper as it.

To hide certain menu items on desktop, give them the class of: hide-on-desktop

To hide certain menu items on mobile, you can use the class: hide-on-mobile

There’s also the hide-on-tablet class you can use.

See how to add classes to menu items here: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

Hope this helps 🙂

[Martin]

Works like a charm! Thanks.

1)
Is there a way to inject a shortcode to that HTML?

2)
Is it possible to move hamburger menu from left side to the right side? (Just the hamburger, the slide out navigation itself I actually prefer on the left as it is by default.)

Cheers,
Martin

[Tom]

Yep, add this into the HTML: <?php echo do_shortcode( '[your-shortcode]' ); ?>

Can you show me what you have so far? There should be some CSS to move the button 🙂

[Natalie]

Hi Tom

I’ve used the code you supplied to add a phone number into the mobile menu bar (as custom html).
It works fine, but I also have the navigation search option and when you click on the search icon, it doesn’t ‘fade out’ the phone number I have put in the mobile menu bar, so it gets in the way of entering your search term (on narrow screens).

Is there a class I need to add to my custom html so that it will fade out as well when I click on the search icon (the way the hamburger menu fades out)

Thanks

[Tom]

Hi Natalie,

Any chance you can link me to your site so I can take a look?

[Natalie]

Thanks Tom

I have started a new topic so I can include my site URL as hidden.
See here:
https://generatepress.com/forums/topic/search-doesnt-fade-out-extra-html-in-mobile-menu-bar/

[Author]

Posts