GeneratePress horizontal menu for mobile

Last updated on  🕢 4 min.
GeneratePress horizontal menu for mobile
(GeneratePress on WordPress Themes)

GeneratePress horizontal menu for mobile in simple steps without plugin and heavy script loading.


My best theme

I like a lot GeneratePress Theme, I tried several themes before to find that cut for me; minimal, light, easily customizable, and especially speed.
In the development working of GP, Tom and his Team have at first place the efficiency of the theme, and the speed of it; user-friendly, SEO friendly, and very light.

Another aspect I appreciate a lot is the assistance even for the free version: top level.
The answers on WordPress Forum Support are speed, qualified, complete with code when you need.

This top-level support, I found too in Rank Math Seo free version's forum, and these are greats qualities of developers that give all their effort to help the users to solve problems, or customizable exigence.

When you find the WordPress theme could be cut for you, and plugin too, is important to check if developers keep updated their work, and the support they can offer.

I'm speaking about awesome free resources, and nothing is due; developers make available for everyone their work, which cost them a lot of time, engagement, passion, altruism, and is always important to remember that nothing is due more.

I've always been satisfied with the themes and plugins I tried to use, even when there was not support.
I put my hands in code when I need, and especially for the file functions.php in child theme, since in it I just use this file beyond style.css

My gratitude for all the developers is a flame I don't allow to go out, never.

But, when I found out GP Theme, and Rank Math SEO Plugin, I was impressed by the courtesy, speed, and high qualified support offered.

When a developer spends a lot of time to share free his work, it would be foolish to expect the support too, for free; and when this happens, is something extraordinary, for all the blogger who can't spend money for payment support.

My solution for mobile menu

I had yet tried in the past since when I'm using GP theme, the horizontal menu for mobile, but I created a little different layout.
Now, to simplify my website especially for mobile, I found this simple solution to add the horizontal menu slide left to right, instead of the default GP Theme menu top to down.

First: I removed with CSS the header menu navigation from mobile:

@media (max-width:769px){.main-navigation .menu-toggle, .main-navigation .mobile-bar-items{display:none}}

Then, I simply used the code of W3Schools at this page: How TO Create A Full screen Overlay Navigation on w3schools.com

The CSS Javascript and the HTML code to add at your pages, are ready to use, as you can see, you just have to customize the HTML with your link, and if you desire, the CSS for change color, and so.
You can also modify the name of Javascript function, to avoid conflict if you are using the same name (i.e. myNav).

2) To add the horizontal menu for mobile, I used this code and added in functions.php file into Child Theme:


add_action( 'generate_menu_bar_items', function() {
if ( wp_is_mobile() ) {
?>
// your HTML code menu
<?php
}
} );

And this is the simple result I got, that I was search for, in the image below on the left you see the close menu, there is just the hamburger (☰), and on the right the menu open, with the × button to close.

The result
Overlay menu left to right

Simple and easy to do

Before the links menu, I added get_search_form() code to insert the search form field of WordPress.

I'm satisfied with this simple, minimal solution, and thanks to all the developers, and W3School that make available to their code ready to use.

GeneratePress Theme has a lot of functions for easy customize what you need, you have just to call the function in the file functions.php of child theme to customize your website as you want.

I find this simple menu for mobile easy to use for users, at least, I hope so.

 

Felice Amadeo - af1.it
Since 2006 I have been working with the internet, writing content and managing the site. I discovered WordPress many years ago, and I've been using this since 2013.