How to create inline mobile menu in Genesis framework

Category: | Tag:

DEMO

OPTION 1

1. Edit child theme’s functions.php.

a) Change


// Rename primary and secondary navigation menus.
add_theme_support( 'genesis-menus', array( 'primary' => __( 'After Header Menu', 'genesis-sample' ), 'secondary' => __( 'Footer Menu', 'genesis-sample' ) ) );

to

// Rename primary and secondary navigation menus.
add_theme_support( 'genesis-menus', array(
    'primary' => __( 'Primary Navigation Menu', 'genesis-sample' ),
    'secondary' => __( 'Footer Menu', 'genesis-sample' ) )
);

b) Add

// Remove the header right widget area.
unregister_sidebar( 'header-right' );

// Reposition the primary navigation menu.
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav' );

// Remove Primary Menu's wrap.
add_theme_support( 'genesis-structural-wraps', array(
    'header',
    // 'menu-primary',
    'menu-secondary',
    'footer-widgets',
    'footer'
) );

2. If you haven’t already, create and assign a WordPress menu to Primary Navigation Menu theme location at Appearance > Menus.

3. Add the following at the end in Genesis Sample’s style.css:

.nav-primary {
    border-top: none;
    float: right;
}

@media only screen and (max-width: 1023px) {

    .site-header .wrap {
        padding-left: 0;
        padding-right: 0;
    }

    .title-area {
        width: auto;
    }

    .header-image .title-area {
        float: left;
        width: 100%;
    }

    .menu-toggle {
        width: auto;
        border-top: none;
        float: right;
        margin-top: 16px;
    }

    .menu-toggle,
    .menu-toggle:focus,
    .menu-toggle:hover {
        border-top: none;
    }

    .nav-primary {
        float: none;
        clear: both;
    }

}

@media only screen and (max-width: 860px) {

    .site-header .wrap {
        padding-left: 5%;
        padding-right: 5%;
    }

}

@media only screen and (max-width: 500px) {

    .title-area,
    .menu-toggle {
        float: none;
        width: 100%;
    }

    .header-image .title-area {
        float: none;
        overflow: hidden;
    }

}

Source: https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/


OPTION 2

To change your Genesis theme mobile menu as shown above, you need to do 3 things...

  1. Add responsive-menu.js
  2. Add few lines at functions.php
  3. Change your style.css file

If you would like to remove the word Menu next to the hamburger menu icon make these changes:

1) In functions.php change


'mainMenu' => __( 'Menu', 'my-theme-text-domain' ),

to


'mainMenu' => __( '', 'my-theme-text-domain' ),

2) In style.css, remove right padding for

.menu-toggle:before,
.menu-toggle.activated:before

Source: https://sridharkatakam.com/add-inline-mobile-responsive-menu-genesis-sample/

Copyright © 2024 Siam Naulak.
magnifiercrossmenu