How to add Beautiful Pro’s mobile responsive menu in other Genesis themes

This is an update to my earlier article titled How to make Header menu in Genesis mobile responsive similar to that in Beautiful Pro. The earlier article worked with Beautiful Pro version 1.0.1. This tutorial is for the current latest v1.1.

Below are screenshots showing the result of applying the steps in Genesis Sample.

beautiful-pro-mobile-menu-closed

beautiful-pro-mobile-menu-open

beautiful-pro-mobile-menu-open2

Step 1

Upload beautiful-pro/js/responsive-menu.js (mirror) to {child theme directory}/js (create ‘js’ if not existing).

Ex.: wp-content/themes/genesis-sample/js/responsive-menu.js

Step 2

Add the following in child theme’s functions.php:

1 2 3 4 5 6 7 8 9 10 11
<?php
//* Do NOT include the opening php tag
 
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'custom_scripts_styles_mobile_responsive' );
function custom_scripts_styles_mobile_responsive() {
 
wp_enqueue_script( 'beautiful-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_style( 'dashicons' );
 
}
view raw functions.php hosted with ❤ by GitHub

Step 3

Add the following at in child theme’s style.css:

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 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112
/* Responsive Menu
--------------------------------------------- */
 
.responsive-menu-icon {
cursor: pointer;
display: none;
margin-bottom: -1px;
text-align: center;
}
 
.responsive-menu-icon::before {
content: "\f333";
display: inline-block;
font: normal 20px/1 'dashicons';
margin: 0 auto;
padding: 10px;
}
.nav-primary .responsive-menu-icon::before {
color: #fff;
}
 
@media only screen and (max-width: 768px) {
 
.genesis-nav-menu.responsive-menu > .menu-item > .sub-menu,
.genesis-nav-menu.responsive-menu {
display: none;
}
 
.genesis-nav-menu.responsive-menu .menu-item,
.responsive-menu-icon {
display: block;
}
 
.genesis-nav-menu.responsive-menu .menu-item {
margin: 0;
}
 
.genesis-nav-menu.responsive-menu .menu-item:hover {
position: static;
}
 
.genesis-nav-menu.responsive-menu .current-menu-item > a,
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu a,
.genesis-nav-menu.responsive-menu a:hover {
background: none;
line-height: 1;
padding: 16px 20px;
}
.nav-primary .genesis-nav-menu.responsive-menu .current-menu-item > a,
.nav-primary .genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.nav-primary .genesis-nav-menu.responsive-menu a,
.nav-primary .genesis-nav-menu.responsive-menu a:hover {
color: #fff;
}
 
.genesis-nav-menu.responsive-menu .menu-item-has-children {
cursor: pointer;
}
 
.genesis-nav-menu.responsive-menu .menu-item-has-children > a {
margin-right: 60px;
}
 
.genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
content: "\f347";
float: right;
font: normal 16px/1 'dashicons';
height: 16px;
padding: 16px 20px;
right: 0;
text-align: right;
z-index: 9999;
}
.nav-primary .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
color: #fff;
}
 
.genesis-nav-menu.responsive-menu .menu-open.menu-item-has-children:before {
content: "\f343";
}
 
.genesis-nav-menu.responsive-menu .sub-menu {
border: none;
left: auto;
opacity: 1;
padding-left: 25px;
position: relative;
-moz-transition: opacity .4s ease-in-out;
-ms-transition: opacity .4s ease-in-out;
-o-transition: opacity .4s ease-in-out;
-webkit-transition: opacity .4s ease-in-out;
transition: opacity .4s ease-in-out;
width: 100%;
z-index: 99;
}
 
.genesis-nav-menu.responsive-menu .sub-menu .sub-menu {
margin: 0;
}
 
.genesis-nav-menu.responsive-menu .sub-menu .current-menu-item > a:hover,
.genesis-nav-menu.responsive-menu .sub-menu li a,
.genesis-nav-menu.responsive-menu .sub-menu li a:hover {
background: none;
border: none;
padding: 12px 20px;
position: relative;
width: 100%;
}
 
}
view raw style.css hosted with ❤ by GitHub

Since the primary navigation has a dark background in Genesis Sample, few additional lines of code has been added in the above (besides what’s taken from Beautiful Pro’s stylesheet) to ensure that text (nav menu links) and the open/close icons are visible (white). If your child theme’s primary nav bar does not have a dark background, you may want to remove/comment out lines 18-20, 50-55 and 75-77.

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 413 other subscribers

Donate

Found this article helpful?

Comments

  1. says

    Thanks for this! It worked perfectly on the older version of Minimum Pro. Only the Dashicons script had to be called, and some minor CSS adjustments after that. Appreciate it!

  2. says

    HI,
    thanks a lot for the tutorial. I have the enterprise pro theme and followed your steps. I still see some bugs, because the new responsive menu interferes with the exstitisting responsive menu of enterprise pro.

    Can you check my site on your phone to see the problem. thanks.

Trackbacks

Need help implementing this tutorial? Click on the image below to contact me.

Genesis Customizations Service by Sridhar Katakam

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>