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

Home Forums Support Display Menu Items on Menu Bar – Mobile Devices

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #274160
    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

    GeneratePress 1.3.44
    GP Premium 1.2.94
    #274248
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #274550
    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

    #274622
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #596475
    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

    #596746
    Tom
    Lead Developer
    Lead Developer

    Hi Natalie,

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

    #597376
    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/

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.