- This topic has 6 replies, 3 voices, and was last updated 2 years, 8 months ago by
Natalie.
-
AuthorPosts
-
February 4, 2017 at 8:48 am #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,
MartinGeneratePress 1.3.44GP Premium 1.2.94February 4, 2017 at 12:21 pm #274248Tom
Lead DeveloperLead DeveloperHi 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentFebruary 5, 2017 at 6:57 am #274550Martin
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,
MartinFebruary 5, 2017 at 9:05 am #274622Tom
Lead DeveloperLead DeveloperYep, 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 10, 2018 at 4:26 am #596475Natalie
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
June 10, 2018 at 9:41 am #596746Tom
Lead DeveloperLead DeveloperHi Natalie,
Any chance you can link me to your site so I can take a look?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 11, 2018 at 7:58 am #597376Natalie
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/ -
AuthorPosts
- You must be logged in to reply to this topic.