hamburger menu

  • Resolved hariorama

    (@hariorama)


    5 years, 7 months ago

    for days now, i tried to follow these instructions without succes.

    the hamburger menu on mobile devices just won’t work.

    maybe there’s another solution?

    • This topic was modified 5 years, 7 months ago by hariorama.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)

  • @hariorama You can try implementing the AMP sidebar component. Using your theme here are the steps to follow:

    1 – Add the amp-sidebar markup
    Below the <body> tag on line 23 of the header.php file (in your themes directory) add the following:

    <amp-sidebar class="af_sidebar" id="sidenav" layout="nodisplay" side="left">
<ul>
 <?php
 wp_nav_menu( array(
 'theme_location' => 'header_menu',
 'menu_class'     => 'primary-side-menu',

   ) );
  ?>
 </ul>
</amp-sidebar>

    2 – Add the sidebar toggle to the hamburger menu
    Open the layout-simple.php file in your theme files (in the partials > header directory within your active theme). Line 18 below:
    <span class="mobile-nav"><i class="fa fa-bars"></i></span>
    Change that to the following:
    <span class="mobile-nav"><i class="fa fa-bars" tabindex="0" on="tap:sidenav.open" role="button" ></i></span>

    3. Add some CSS styling to your themes style.css

    amp-sidebar{padding: 30px 20px 0 20px;
}
amp-sidebar a{padding: 0 25px;
    }
.menu-menu-prime-container ul,ul.primary-side-menu {
   list-style: none;    margin: 0 0 0 0 !important;
   padding: 0 20px 0 0px;
    
}

amp-sidebar ul > ul > li,amp-sidebar ul > li{
   padding: 6px 0;
   border-bottom: 1px solid #444;
}
amp-sidebar ul li.current-menu-parent,amp-sidebar ul > ul > li.current-menu-parent{
   padding: 0px 0;
   border-bottom: 0px solid #444;

}
    Thread Starter hariorama

    (@hariorama)

    wow, you are a genius.

    can you please have a look now. it is not yet showing the right menu.

    @hariorama You can register the menu from within your themes functions.php file (or change the theme location from the previous step), and then apply that menu to the location from your WordPress menu options:

    function register_amp_menu() {
  register_nav_menus(
    array(
      'header_menu' => __( 'AMP Footer Menu' ),
    )
  );
}
add_action( 'init', 'register_amp_menu' );
    Thread Starter hariorama

    (@hariorama)

    you are my hero. great! great! great! thank’s for your help.

    Thread Starter hariorama

    (@hariorama)

    how can i solve the sub-menu issue? all of them are expanded.

    Thread Starter hariorama

    (@hariorama)

    and last but not least the search icon issue on mobile view?

    • This reply was modified 5 years, 7 months ago by hariorama.

    If you are using the amp-sidebar approach the submenu requires more programming, including potentially a custom menu walker and using amp-accordion. The best approach might be to each out to your theme developer.

    For the search icon in AMP you can add the following if you want to remove it from view on AMP. It uses custom JavaScript so it won’t work on any AMP URLs.

    [amp] i.fa.fa-search {
    display: none;
}
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘hamburger menu’ is closed to new replies.