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_stylesheet_directory_uri() . '/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.

Stay up to date

Get tips on Genesis, WordPress, Web design & more

Join 651 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.

  3. Diego says

    Thanks for your numerous tutorials. I have the last Minimum Pro theme and followed your steps.

    But not all is OK. I think the existing responsive menu of Minimum pro interferes with the new menĂ¹.
    Minum Pro has his responsive-menu.js, I used the new one and add the new function in function.php.
    Must I delete something in function.php?

    This the site demo: http://www.hotelinlignano.com/aipt

    Some suggestions?
    Mathias, how you resolved?

      • says

        Hi Sridhar, I solved thank you. With Minimum Pro:

        Step 1: OK, use the new responsive-menu.js (write over the old one)
        Step 2 OK, but remove the row 23/24 in function.php (otherwise it doesn’t run; it is the same code because Minimum Pro has already it in function.php)
        Step 3: OK

        I made some customizations in the CSS to have a more friendly navigation (used an image icon for Dashboard, moved the arrows in submenu,…). You and the other guys can view the result here:
        Corsi Personal Trainer

        This the CSS:


        /* Responsive Menu
        --------------------------------------------- */
        .responsive-menu-icon {
        cursor: pointer;
        display: none;
        margin-bottom: -1px;
        text-align: center;
        }

        .responsive-menu-icon::before {
        content: "";
        display: inline-block;
        font: normal 20px/1 'dashicons';
        margin: 0 auto;
        background-image: url(/img/menu-icon2.png); /* insert here your image path */
        width:88px;
        height:43px;
        }
        .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;
        }
        .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-left: 60px;
        }

        .genesis-nav-menu.responsive-menu > .menu-item-has-children:before {
        content: "\f347";
        float: left;
        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%;
        }
        }

  4. says

    Works great on the Eleven40 Pro theme, thanks.
    I’m glad I searched for this solution now and that you shared the exact steps to make this work.
    I didn’t like the way the old menu used over half the fold on my phone.

  5. says

    Hi Sri! Thanks for this, it works great! I was wondering if it’s easy to limit this to a specific menu. I have one menu that I don’t want converted.

    thanks!
    Carleigh

Trackbacks

Leave a Reply

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


3 + = eleven

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>