This is responisve menu replaces the header-widget menu when the screen is smaller the 768px wide.
To create a responsive menu, there are a couple things needed:
- Responsive menu JavaScript
- Registration of JavaScript file and Dashicons icon
- Some CSS
1 Add responsive-menu.jso to your theme
Create a file called “responsive-menu.js” and paste the following code in to the file.
Then save this file in to your JS folder in the Genesis theme.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | jQuery(function( $ ){ $("header .genesis-nav-menu").addClass("responsive-menu").before(''); $("#responsive-menu-icon").click(function(){ $("header .genesis-nav-menu").slideToggle(); }); $(window).resize(function(){ if(window.innerWidth > 768) { $("header .genesis-nav-menu").removeAttr("style"); } }); }); |
2 Enqueue the scripts in to function.php
When you added the responsive-menu.js script to your js folder, you have to enqueue it in the function.php
Also you see the dashicons added here. the dashicons is an icon font that creates the
also called a “hamburger”.
1 2 3 4 5 6 7 | //* Enqueue scripts add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' ); function theme_enqueue_scripts() { wp_enqueue_script( 'theme-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' ); wp_enqueue_style( 'dashicons' ); } |
3 next up, the css for the responsive menu
Place the following code in your style.css
Since this is a responsive menu, on a desktop view the mobile menu is not showing.
Only if a screen is smaller then 768px wide.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /* Responsive Menu --------------------------------------------- */ #responsive-menu-icon { cursor: pointer; display: none; } #responsive-menu-icon::before { color: #333; content: "\f333"; font: normal 24px/1 'dashicons'; margin: 0 auto; } @media only screen and (max-width: 768px) { .responsive-menu { display: none; } #responsive-menu-icon { display: block; } } |
