CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3550879
user3550879

Reputation: 3469

Animated toggle button for mobile

I have a Wordpress website who's navigation is based on the Bootstrp 3 framework. I want to have the 'toggle' button be animated (from the hamburger look to the 'x' and back)

NAV HTML - basic bootstrap nav for Wordpress code.

 <nav class="navbar navbar-custom" role="navigation" data-0="opacity:1;" data-50="opacity:0;">

         <!-- Brand and toggle get grouped for better mobile display -->

            <div class="navbar-header">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                    <span class="icon-bar"></span> 
                </button> 

                <a class="navbar-brand" href="<?php echo home_url(); ?>"></a>

            </div>           

        <!-- Collect the nav links, forms, and other content for toggling --> 

            <div class="collapse navbar-collapse navbar-right"> 
                <?php /* Primary navigation */
                    wp_nav_menu( array(
                    'menu' => 'top_menu',
                    'depth' => 2,
                    'container' => false,
                    'menu_class' => 'nav navbar-nav',
                    //Process nav menu using our custom nav walker
                    'walker' => new wp_bootstrap_navwalker())
                    );
                ?>
            </div>
    </nav>

javascript in head tags

<script>
  $(document).ready(function () {
  $(".navbar-toggle").on("click", function () {
    $(this).toggleClass("active");
          });
  });
</script>

CSS

.navbar-toggle .icon-bar:nth-of-type(2) {
  top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
top: 2px;
}

.navbar-toggle .icon-bar {
  position: relative;
  transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
  top: 6px;
  transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
  background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
  top: -6px;
  transform: rotate(-45deg);
}

The toggle moves when clicked, so it's targeted properly. But doesn't form an 'x' like its supposed to

Upvotes: 0

Views: 1481

Answers (1)

SSB
SSB

Reputation: 450

You need to make the 2nd bar completely gone when active.

.navbar-toggle.active .icon-bar:nth-of-type(2) {
  display:none;
}

If that doesn't work, try also using span stead of .icon-bar and using prefixes for your animations:

.navbar-toggle span {
  position: absolute;
  transition: .3s all;
  -moz-transition: .3s all;
}

I would play around on this codepen example: http://codepen.io/u/pen/jGHch

And if you're looking for a different animation here are more examples.

Upvotes: 1

Related Questions