How to create a custom mobile menu

  • Hello, first, thanks for this great theme.
    I’d like a custom mobile menu like this because i’d like to optimize my site with AMP and when i do my handbuger menu stop functioning. so if i can get a menu like this https://www.dropbox.com/s/a8yvbxitlii0rom/Screenshot_20200807-191057.png?dl=0 on my header, i think it would really be cool.

    Though i tried adding this to my header.php

    <a href="/category/home/">HOME</a> <a href="/category/music">MUSIC</a> <a href="/category/gospel">GOSPEL</a> <a href="/category/news/">NEWS</a> <a href="/category/sport">SPORTS</a>

    and this for the search

    <p>
</p><div align="center">
<form id="search" action="<?php bloginfo('home'); ?>" method="get">
<div>
<input type="text" name="s" id="s" inputmode="predictOn" placeholder="Search <?php echo get_bloginfo( 'name' ); ?>" value="" /> <input type="submit" name="submit_button" value="GO" />
</div>
</form>
</div>
<br>

    but it didnt work though

    • This topic was modified 4 years, 7 months ago by Chrisblogs.
    • This topic was modified 4 years, 7 months ago by Chrisblogs.

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

Viewing 9 replies - 1 through 9 (of 9 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    We actually have a plugin for AMP which makes the menu toggle work nicely: https://github.com/tomusborne/amp-for-generatepress/raw/master/amp-for-generatepress.zip

    If you install that as a plugin it should work with the official AMP plugin.

    Let me know ??

    Thread Starter Chrisblogs

    (@chrisblogs)

    Thanks @edge22 for the reply
    But i think the menu from the screenshot above would really be lovely for mobile devices since most of my visitors uses mobile devices over here

    Theme Author Tom

    (@edge22)

    Something like that will likely require some custom development, unfortunately.

    You’re likely on the right track adding that stuff to your header (as long as you’re using a child theme). What about it didn’t work?

    Thread Starter Chrisblogs

    (@chrisblogs)

    WHEN I DID ADD IT, MY SITE CRASHED. SO I DELETED IT IMMEDIATELY.
    I WANT TO KNOW, IS THAT THE RIGHT CODE OR AM I MISSING SOMETHING?
    CUS I’D REALLY LOVE THIS TO WORK

    Theme Author Tom

    (@edge22)

    That likely means you’re adding it in the wrong area of the template, PHP can be tricky like that.

    You could try adding some CSS like this, instead:

    #mobile-header .main-nav > ul {
    display: block;
}

#mobile-header .menu-toggle {
    display: none;
}

    We’re limited to the amount of custom development we can help with in our free support forum, but hopefully that gets you started ??

    Thread Starter Chrisblogs

    (@chrisblogs)

    The AMP for generatepress is totally displacing my sites arrangement though. for example, my search button on header disappeared ????????

    Theme Author Tom

    (@edge22)

    Our navigation search? It uses javascript, which means it won’t work when using AMP (javascript isn’t supported).

    Thread Starter Chrisblogs

    (@chrisblogs)

    how can i move the mobile nav down below the header
    when i move the navigation downward, the header moves too
    Screenshot 1
    and i’d love to put a box over each of the nav page or category

    • This reply was modified 4 years, 7 months ago by Chrisblogs.
    • This reply was modified 4 years, 7 months ago by Chrisblogs.
    Theme Author Tom

    (@edge22)

    I’m not sure I understand, isn’t it below the header right now?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘How to create a custom mobile menu’ is closed to new replies.