🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Support request] Hamburger Icon as Menu Item

Home Forums Support Hamburger Icon as Menu Item

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1157175
    Anthony

    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

    Here's what I'm looking to do

    #1157335
    Leo
    Staff
    Customer Support

    Hi there,

    Would it work if you just use the built-in theme icon?
    https://www.screencast.com/t/oXtuqsZl

    Let me know 🙂

    #1157728
    Anthony

    I 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

    #1157836
    Tom
    Lead Developer
    Lead Developer

    Would this act differently than your other menu items with sub-menus? Would those continue to fly-out to the left/right?

    #1158081
    Anthony

    Would 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 Item

    All 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

    #1158417
    Tom
    Lead Developer
    Lead Developer

    Have 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 🙂

    #1164614
    Anthony

    Option 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?
    2020-02-06_2152

    Let 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.

    #1164677
    Tom
    Lead Developer
    Lead Developer

    Hi 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';
    } );
    #1164683
    Anthony

    Hey.

    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

    #1165550
    Tom
    Lead Developer
    Lead Developer

    Instead 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;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.