- This topic has 11 replies, 2 voices, and was last updated 2 years, 7 months ago by Ying.
-
AuthorPosts
-
February 6, 2020 at 3:41 pm #1157175Anthony
Wondering my best bet to get a hamburger icon as a menu item. My client wants a single hamburger button (like as if the off-canvas menu was the only menu active on desktop) that drops down to three pages, each page dropping down an additional time to other subpages.
Will I need to install Fontawesome or another icon plugin in order to put the code:
<i class=”fa fa-bars” aria-hidden=”true”></i>
Right in as a menu item?
Thanks
EDIT:
I don’t want the “Flyout Menu”, but instead I basically want a normal mobile menu (one that drops down vertically, sub-menus drop below parent menu items), on the desktop. With a hamburger icon as the top menu item.
https://drive.google.com/file/d/1kwXyIskwi3W97x2hQbuRQs0bho0-V6d0/view?usp=sharing
February 6, 2020 at 9:53 pm #1157335LeoStaffCustomer SupportHi there,
Would it work if you just use the built-in theme icon?
https://www.screencast.com/t/oXtuqsZlLet me know π
February 7, 2020 at 5:15 am #1157728AnthonyI guess I’m having trouble.
Should I leave the top Menu Item blank and replace the :before dropdown carrot icon with the built-in hamburger icon?
I’m also having trouble getting the menu to dropdown vertically. On desktop the dropdowns seem to always want to “flyout” to the left or right. I was hoping for:
Hamburger > Submenu Item > Sub-Sub Men Item
Each step dropping down vertically with not flyout.
Exactly like normal mobile menu would behave.
Thanks
February 7, 2020 at 6:35 am #1157836TomLead DeveloperLead DeveloperWould this act differently than your other menu items with sub-menus? Would those continue to fly-out to the left/right?
February 7, 2020 at 7:58 am #1158081AnthonyWould this act differently than your other menu items with sub-menus? Would those continue to fly-out to the left/right?
Not really sure what you mean.
Let me explain more clearly.
My client wants one menu throughout the entire site.
This will be located in the upper right corner on the desktop, and at the top of the mobile version.
On Desktop he just wants a very minimal looking menu with the very top Parent Item being a hamburger icon like so:
Hamburger
Past
Sub Sub Menu Item
Sub Sub Menu Item
Present
Sub Sub Menu Item
Sub Sub Menu Item
Future
Sub Sub Menu Item
Sub Sub Menu ItemAll of which drop vertically below the hamburger menu (no flyouts).
The problem is when you hover or click on let’s say Past, it flies out to the right or left.
I need the “Sub Sub Menu Items” items under Past, Present, and Future to also dropdown vertically underneath it exactly as the regular mobile menu behaves.
I also need to figure my best way to get the Hamburger icon as the top Parent Item. I was thinking to replace the Down Carrot Icon with the Hamburger Icon and leaving the top Menu Item Blank in the menu? Idk I already tried hiding the Carrot Icon, putting in the Font Awesome Hamburger Icon in as the menu item in the WP Dashboard and adjusting the Padding. That kinda worked.
On mobile, he wants the menu to behave just as the stock GP Mobile menu works (not the off-canvas, just the normal one) so I shouldn’t have an issue with that.
Thanks
February 7, 2020 at 5:06 pm #1158417TomLead DeveloperLead DeveloperHave you tried setting the dropdown option to “Click – Menu Item”?: https://docs.generatepress.com/article/navigation-dropdown/
That should bring everything straight now.
As for the icon – this is a tough one. Are you using font icons or SVGs on your website?
I wonder if something like this would help?: https://wordpress.org/plugins/svg-menu/
Let me know π
February 13, 2020 at 2:33 pm #1164614AnthonyOption 1 I tried:
So I got it how I want it to look on desktop:
https://koehlerrice.com/homepage/
I used a font-awesome icon right in the Menu > Menu Item > Navigation Label.
1: I lost the sub sub drop down carrots. Past, Present, and future all drop down to other menu items.
2: As you can see on mobile, it’s dropping down to another hamburger dropdown.I could do a workaround with a ton of CSS classes (hide-on-mobile, tablet, desktop) inside the menu?
Option 2 I tried:
I also tried what Leo Mentioned here:
Hi there,
Would it work if you just use the built-in theme icon?
https://www.screencast.com/t/oXtuqsZlLet me know π
But I ran into a problem with the sub sub menus also having the hamburger icon instead of the down carrot.
I tried adding the carrot icon to the sub sub dropdown by adding this CSS but had no luck:
.menu-item-has-children ul .dropdown-menu-toggle
{
content: “\f106”!important;
}———-
Any input would be great. Thanks again as always.
February 13, 2020 at 4:49 pm #1164677TomLead DeveloperLead DeveloperHi there,
1. What CSS are you using for this right now? I have a feeling some of your CSS is hiding the dropdown icons.
2. I would enable the Mobile Header option, then create a new menu location/menu for mobile like this:
add_action( 'init', function() { register_nav_menu( 'mobile-menu',__( 'Mobile Menu' ) ); } ); add_filter( 'generate_mobile_header_theme_location', function() { return 'mobile-menu'; } );
February 13, 2020 at 5:00 pm #1164683AnthonyHey.
That worked great!
Here is the CSS
.menu-item-has-children .dropdown-menu-toggle {
padding-right: 10px!important;
}.main-navigation .main-nav ul li a
{
padding-left: 20px!important;
line-height: 60px;
}.main-navigation .main-nav ul ul li a
{
padding: 8px 15px 8px 5px!important;
text-align: right;
}.main-navigation ul ul
{
width: 200px!important
}.menu-item-has-children ul .dropdown-menu-toggle
{
line-height: 1.2;
}.dropdown-menu-toggle:before,
.menu-item-has-children ul .dropdown-menu-toggle
{
display: none;
}It’s more of a workaround at the moment and it’s causing more problems everywhere else
February 14, 2020 at 9:31 am #1165550TomLead DeveloperLead DeveloperInstead of this:
.dropdown-menu-toggle:before, .menu-item-has-children ul .dropdown-menu-toggle { display: none; }
Try this:
.main-navigation .main-nav > ul > li .dropdown-menu-toggle { display: none; }
August 30, 2021 at 8:35 am #1912932David Perez GarciaCannot see the video…
August 30, 2021 at 9:35 am #1912991YingStaffCustomer SupportHi David,
Can you open a new topic if you run into some issue related to GP?
Thanks!
-
AuthorPosts
- You must be logged in to reply to this topic.