Animated mobile "burger" menu

Support
#1

Hi,

I’m following the guidelines on this old thread in an attempt to create an animated menu icon for mobile:

It almost works, except that the mobile menu is always fixed in the open position. Is it possible to provide updated code that allows this function to work?

Here is the code used for the _nav-primary.php

<?php

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

?>

<a href="#" id="menu" class="x-btn-navbar collapsed" data-toggle="collapse" data-target=".x-nav-wrap.mobile">
  <span></span>
</a>

<nav class="x-nav-wrap desktop" role="navigation">
  <?php x_output_primary_navigation(); ?>
</nav>

<div class="x-nav-wrap mobile collapse">
  <?php x_output_primary_navigation(); ?>
</div>

And the CSS:

#menu {
  background: transparent;
  font-size: 1.5em; 
  width: 3em;
  height: auto;
  box-shadow:none;
}

#menu span {
  background: #27b9e5;
  display: block;
  position: relative;
  -webkit-transform: translate3d(0,0,0);
}

#menu span,
#menu span:before,
#menu span:after {
  width: 100%;
  height: .2em;
  -moz-transition:       all 0.4s;
  -o-transition:         all 0.4s;
  -webkit-transition:    all 0.4s;
  transition:            all 0.4s;
  -webkit-transform: translate3d(0,0,0);
}

#menu span:before,
#menu span:after {
  background: #27b9e5;
  content: " ";
  margin-top: -.6em;
  position: absolute;
}

#menu span:after {
  margin-top: .6em;
}

#menu.on span {
  background: transparent;
}

#menu.on span:before {
  -moz-transform: rotate(45deg) translate(.5em, .4em);
  -ms-transform: rotate(45deg) translate(.5em, .4em);
  -o-transform: rotate(45deg) translate(.5em, .4em);
  -webkit-transform: rotate(45deg) translate(.5em, .4em);
  transform: rotate(45deg) translate(.5em, .4em);
}

#menu.on span:after {
  -moz-transform: rotate(-45deg) translate(.45em, -.35em);
  -ms-transform: rotate(-45deg) translate(.45em, -.35em);
  -o-transform: rotate(-45deg) translate(.45em, -.35em);
  -webkit-transform: rotate(-45deg) translate(.45em, -.35em);
  transform: rotate(-45deg) translate(.45em, -.35em);
}

.x-btn-navbar.collapsed {
box-shadow:none;
}

And the javascript:

jQuery( function($) {
jQuery("#menu").on("click touchend",function(event) {
        event.preventDefault(); 
	jQuery("#menu").toggleClass('on');
});
});
#2

Hi there,

Thanks for writing in! Regretfully, this is not a feature offered in X and we could not continue on fixing issues that arise from the use of custom code even if we have given it here in the support forum. Custom codes were meant to be a guide or a starting point. We could not maintain them as they are not official parts of the theme.

You will need to consult with a third party web developer to continue with the custom development. With that being said, you can use a simple CSS approach to achieve the similar functionality. Try adding it in your child theme’s style.css file:

.x-btn-navbar:not(.collapsed) .x-icon-bars:before {
    content: "\f00d";
}

Thank you for understanding.

#3

Thanks Nabeel.

Any power users here able to throw any light on this? Someone who has succcessfully employed similar functionality?

Thanks in advance!

#4

Hi there,

You might want to check and post in the Peer to Peer forum to ask for other users that might have implemented this:

Thank you.

#5

Thanks Jade - through a process of trial and error I have now figured out the code and made the adjustments so that the menu now works as it should.

Related question - how can I change the background colour of the dropdown mobile menu? I would like the new background colour to be full width, completely replacing the default colour.

Many thanks for your help!

#6

Hi There,

To change the background color of mobile menu, please add this custom CSS under Theme Options > CSS:

@media (max-width: 979px){
    .x-brand {
        margin-left: 30px;
    }
    #menu {
        margin-right: 30px;
    }
    .x-navbar .x-container.max {
        width: 100%;
    }
    #x-nav-wrap-mobile {
        background: #b19081;
        padding: 0 30px;
    }
}

Hope it helps :slight_smile:

#7

@thai yes that helps a lot!

The only thing is that the top of the background colour is not in line with the bottom of the menu bar, i.e. the colour overlaps making it look odd.

I tried a few adjustments but couldn’t figure out the right css. Any idea how to fix this?

#8

Hello There,

Simply add a bottom margin. Update the code and use this:

@media (max-width: 979px){
    .x-brand {
        margin-left: 30px;
    }
    #menu {
        margin-right: 30px;
        margin-bottom: 43px;
    }
    .x-navbar .x-container.max {
        width: 100%;
    }
    #x-nav-wrap-mobile {
        background: #b19081;
        padding: 0 30px;
    }
}

Hope this helps.

#9

D’oh! Thanks @RueNel that fixed it!

#10

Glad it’s fixed now and you’re most welcome!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.