@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;
}
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' );
you are my hero. great! great! great! thank’s for your help.
how can i solve the sub-menu issue? all of them are expanded.
and last but not least the search icon issue on mobile view?
-
This reply was modified 4 years, 8 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;
}
