[JekyllParticipant]

Hi,

I just decided to share with you my approach to implement a responsive menu in X, so here we go!

Basicly you will have a menu that slides in from the side covering/shifting your sites content.

Lets begin:

1. Set up a child theme.
2. Install the plugin Responsive Menu from https://wordpress.org/plugins/responsive-menu/
3. Activate the plugin
4. Go to the plugins main options page in the admin screen and activate Use shortcode
5. Go to the plugins options page “Look and feel” and make sure to have “Fixed Positioning” unchecked; this is required regardless if you have a static or fixed header.
6. On the same page at “Menu Settings”, assign your primary navigation.
7. Then, go to “Advanced Setting” and specify a “Menu breakpoint”. Type in the smallest width at which your current desktop menu shows properly. If your desktop menu breaks onto a second line, just type in the width everything looks good at.
8. Last, specify the menu to hide when the mobile menu appears. Without any deeper customization done to the navigation, just paste in .x-nav
9. Next, copy the file _nav-primary.php from /x/framework/views/global/ to x-child/framework/views/global/
10. Open the file and replace the entire code with the code given below:

<?php

// =============================================================================
// VIEWS/GLOBAL/_NAV-PRIMARY.PHP
// -----------------------------------------------------------------------------
// Outputs the primary nav.
// =============================================================================

?>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>
<?php echo do_shortcode( '[responsive-menu]' ); ?>

This will entirely remove the features used by the standard mobile menu from your HTML output, just to clarify things.

11. Now copy the CSS below to your customizer:

#responsive-menu {
    position: fixed;
}

12. With this setup, I suggest you to use a fixed header for mobile aswell (standard is static for mobile), so add this CSS to your customizer too:

@media (max-width: 979px){
.x-navbar-fixed-top {
position:fixed;
}
}
body.x-navbar-fixed-top-active .x-navbar-wrap {
  height: 60px !important;
}

Make sure to change the height to the navbar top height specified in your customizers header section.

Edit: In ethos add

.responsive-menu li {
background-color: #43494C !important;
}

to your CSS where background-color means the color you have chosen in the plugins options.

If you want to use the push animation try .x-container.max.width.main for the page wrapper, so the button itself stays on screen.

Thats it, enjoy! 🙂

[LelyModerator]

Hi Jekyll,

Thank you for sharing and giving those detailed steps. This will really helps other members of the community.

Always,
X

[Author]

Posts