html - Animate bootstrap burger menu to cross -

i'm trying animate burger icon on bootstrap menu become cross when menu displayed.

it's working correctly once menu displaying shouldnt display cross. know how can make show burger menu rather cross initially?

css changing burger cross.

.navbar-toggle {     border: none;     background: transparent !important; } .navbar-toggle .icon-bar {     width: 22px;     transition: 0.2s; } .navbar-toggle .top-bar {     transform: rotate(45deg);     transform-origin: 10% 10%; } .navbar-toggle .middle-bar {     opacity: 0; } .navbar-toggle .bottom-bar {     transform: rotate(-45deg);     transform-origin: 10% 90%; }  .navbar-toggle.collapsed .top-bar {     transform: rotate(0); } .navbar-toggle.collapsed .middle-bar {     opacity: 1; } .navbar-toggle.collapsed .bottom-bar {     transform: rotate(0); } 

your css not issue, it's html.

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> should <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false">.

and <div class="collapse navbar-collapse navbar-ex1-collapse fullwidth navbar-main-collapse"> should <div class="collapse navbar-collapse fullwidth" id="navbar-main-collapse">

/*--- navigation styles  ---*/    #site-nav .company-logo {    padding-top: 0px;    padding-bottom: 15px;    float: left;    margin-bottom: 5px;    margin-top: 15px;  }  #site-nav .company-logo img {    text-align: left;  }  #site-nav .navbar-nav {    display: block;    float: none;  }  #site-nav .navbar-inverse {    background-color: transparent;    border-color: transparent;    text-align: center;    width: 100%;    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;  }  #site-nav .nav > li > {    line-height: 1.6em;    text-decoration: none;    font-style: normal;  }  #site-nav .navbar-inverse .navbar-nav>li>a {    color: #8f8e8e;    font-weight: 400;    font-size: 16px;  }  #site-nav .navbar-inverse .navbar-nav>li>a:hover {    color: #022169;    background-color: transparent;  }  #site-nav .navbar-inverse .navbar-nav>li>a:hover,  #site-nav .navbar-inverse .navbar-nav>li>a:focus,  #site-nav .navbar-inverse .navbar-nav>.open>a,  #site-nav .navbar-inverse .navbar-nav>.open>a:hover,  #site-nav .navbar-inverse .navbar-nav>.open>a:focus {    background-color: transparent;    text-decoration: none;    color: #022169;  }  #site-nav .navbar {    margin-bottom: 0px;  }  #site-nav {    position: relative;    border: 0;    background-color: black;    background-color: rgba(35, 35, 35, 1);  }  #site-nav .navbar.navbar-fixed-top {    margin-top: 0px;    box-shadow: rgba(0, 0, 0, 1.0) 0px 2px 2px;  }  #site-nav .navbar-nav > li {    float: none;    display: inline-block;  }  #site-nav .navbar-toggle {    float: right;    text-align: right;    border: 0px;    margin-right: 0px;    margin-top: 38px;  }  #site-nav .navbar-inverse .navbar-toggle:hover,  #site-nav .navbar-inverse .navbar-toggle:focus {    background: none;  }  #site-nav .navbar-nav > li > .dropdown-menu {    border-radius: 0px;  }  #site-nav .dropdown-menu > li > {    text-align: left;    font-size: 14px;    line-height: 1.8em;  }  #site-nav .dropdown-menu > li > a:hover,  .dropdown-menu > li > a:focus {    text-decoration: none;    background-color: #f2f2f2;  }  #site-nav .company-logo {    text-align: left;    font-family: 'yanone kaffeesatz', sans-serif;    padding-bottom: 0px;    margin-bottom: 0px;  }  #site-nav .company-logo {    color: #022169;    font-size: 16px;  }  #site-nav .company-logo a:hover {    text-decoration: none;  }  #site-nav .company-logo span {    text-align: left;    font-size: 32px;    letter-spacing: 1px;  }  #site-nav .navbar-inverse .navbar-toggle .icon-bar {    background-color: #000;  }  /*--- responsive styles ---*/    @media (max-width: 767px) {    #site-nav .navbar-nav {      margin: 0;    }    #site-nav .navbar-nav {      display: block;      width: 100%;      float: left;      position: relative;      margin-top: 20px;      margin-bottom: 20px;    }    #site-nav .navbar-nav > li {      float: none;      display: inline-block;      width: 100%;    }    #site-nav .navbar-collapse {      padding: 0px;    }    #site-nav .navbar-inverse .navbar-nav > li > {} #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {      text-decoration: none;    }    #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,    #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {      color: #022169;      text-decoration: none;      background-color: #f2f2f2;    }    #site-nav .navbar-inverse .navbar-nav > li > a:hover {      background-color: #4b4b4b;      background: none;      text-decoration: none;    }    #site-nav .navbar-inverse .navbar-collapse,    #site-nav .navbar-inverse .navbar-form {      border: 0px;    }    #site-nav .company-logo {      padding-bottom: 25px;    }  }  /* ==========================================================================      custom  ========================================================================== */    #site-nav,  #footer {    background-color: #022169;  }  #site-nav .company-logo {    margin-bottom: 10px;    margin-top: 10px;    width: 25%;  }  #site-nav .nav.navbar-nav {    margin-top: 12px;  }  #site-nav .navbar-inverse .navbar-nav > li > {    color: #fff;    font-weight: lighter;  }  #site-nav .navbar-inverse .navbar-nav > li > a:hover {    color: #022169;  }  #site-nav .navbar-inverse .navbar-nav > li.link > a:hover,  #site-nav .navbar-inverse .navbar-nav > li.link > a:focus,  #site-nav .navbar-inverse .navbar-nav > .open > a,  #site-nav .navbar-inverse .navbar-nav > .open > a:hover,  #site-nav .navbar-inverse .navbar-nav > .open > a:focus {    background-color: #022169;    color: #fff;  }  #site-nav .company-logo img {    width: 100%;  }  #site-nav .fa.fa-circle.fa-stack-2x {    color: #fff;  }  #site-nav .insta {    padding-right: 5px !important;  }  #site-nav .linkedin {    padding-left: 5px !important;    padding-right: 0px !important;  }  #site-nav .fa-inverse {    color: #022169;  }  #site-nav .navbar-inverse .navbar-nav > li > a:hover {    color: #fff;  }  #site-nav .nav.navbar-nav li {    padding-bottom: 5px;    padding-left: 10px;    padding-right: 10px;  }  #site-nav .dropdown-menu.navmenu-nav li a:hover {    border-width: 0;  }  #site-nav .navbar-inverse .navbar-toggle .icon-bar {    background-color: #fff;  }  @media screen , (max-width: 991px) {    #site-nav .company-logo {      width: 100%;      margin: 0 auto;      text-align: center;      margin-top: 17px;    }    #site-nav .company-logo img {      width: 50%;    }  }  @media screen , (max-width: 768px) {    #site-nav .company-logo img {      width: 265px;    }    #site-nav .company-logo {      width: 80%;      text-align: left;    }  }  #site-nav .navbar-toggle {    border: none;    background: transparent !important;  }  #site-nav .navbar-toggle .icon-bar {    width: 22px;    transition: 0.2s;  }  #site-nav .navbar-toggle .top-bar {    transform: rotate(45deg);    transform-origin: 10% 10%;  }  #site-nav .navbar-toggle .middle-bar {    opacity: 0;  }  #site-nav .navbar-toggle .bottom-bar {    transform: rotate(-45deg);    transform-origin: 10% 90%;  }  #site-nav .navbar-toggle.collapsed .top-bar {    transform: rotate(0);  }  #site-nav .navbar-toggle.collapsed .middle-bar {    opacity: 1;  }  #site-nav .navbar-toggle.collapsed .bottom-bar {    transform: rotate(0);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />  <section id="site-nav">    <div class="container">      <nav class="navbar navbar-inverse" role="navigation">        <div class="company-logo">          <a href="">            <img src="http://hanlon.koru.firebrand.co.nz/themes/startertoplight/img/logo-reverse.png" alt="your logo here">          </a>        </div>        <!--/.logo -->        <div class="navbar-header page-scroll">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false"> <span class="sr-only">toggle navigation</span>  <span class="icon-bar top-bar"></span>  <span class="icon-bar middle-bar"></span>  <span class="icon-bar bottom-bar"></span>           </button>        </div>        <div class="collapse navbar-collapse fullwidth" id="navbar-main-collapse">          <ul class="nav navbar-nav">            <li class="link"><a href=/new-content-page/>our team</a>            </li>            <li class="link"><a href=/new-content-page-2/>our services</a>            </li>            <li class="link"><a href=/our-projects/>our projects</a>            </li>            <li class="link"><a href=/working-for-us/>working us</a>            </li>            <li class="link"><a href=/contact/>contact</a>            </li>            <li class="insta"><a href=http://www.instagram.com><span class="fa-stack fa-lg">                      <i class="fa fa-circle fa-stack-2x"></i>                      <i class="fa fa-instagram fa-stack-1x fa-inverse"></i>                    </span>                </a>              </li>            <li class="linkedin"><a href=http://linkedin.com><span class="fa-stack fa-lg">                      <i class="fa fa-circle fa-stack-2x"></i>                      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>                    </span>                </a>              </li>        </div>        <!-- /.navbar-collapse -->      </nav>      <!-- /.col -->    </div>    <!-- /.container -->  </section>