Ícone animado “x” para o botão de alternância da barra de navegação do Bootstrap

Bom dia Pessoal;

	 

	Seguinte, eu criei o menu bootstrap segue o código abaixo. Quando eu estou vendo o site pelo celular, o menu vira um HAMBURGUER. Só que eu quero quando clicar no HAMBURGUER ele vira um X.

	E quando eu clicar no link ele voltar para o HAMBURGUER.

<nav class="navbar navbar-default navbar-fixed-top">
        
        <!--INICIO DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->
        <div class="container-fluid containertop" id="topoinicio">

        
            <div class="navbar-header">
                <!--INICIO CONFIGURAÇÃO MENU HAMBERGUER-->
                <button type="button" class="navbar-toggle menuHamburguer" data-toggle="collapse" data-target="#menu-navegacao">
                    <span class="icon-bar top-bar"></span>
                    <span class="icon-bar middle-bar"></span>
                    <span class="icon-bar bottom-bar"></span>

                </button>
                <!--FIM CONFIGURAÇÃO MENU HAMBERGUER-->

                <!--INICIO LOGO MARCA-->
                
                <!--<a class="navbar-brand" href="#page-top">
                    <span class="iden">Iden</span> <span class="techonology">Technology</span>
                </a>-->
                <ol class="nav">
                <ol class="menu" style="border:none;">
                    <a href="#home">
                    <img src="img/ico_3.png" class="img-responsive img-rounded imgLogo">
                    </a>
                </ol>
                </ol>
                
                <!--FIM LOGO MARCA-->
            </div>

            <!--INICIO MENU LINK-->
            <div class="collapse navbar-collapse menu-navegacao" id="menu-navegacao">
                
                <ul class="nav navbar-nav navbar-right">
                    <li class="menu">
                        <a href="#home">HOME</a>
                    </li>
                    <li class="menu">
                        <a href="#solucoes">SOLUÇÕES</a>
                    </li>
                    
                    <li class="menu">
                        <a href="#servicos">SERVIÇOS</a>
                    </li>                    

                    <li class="menu">
                        <a href="#empresa">EMPRESA</a>
                    </li class="menu">

                    <li class="menu">
                        <a href="#localizacao">LOCALIZAÇÃO</a>
                    </li>                    

                    <li class="menu">
                        <a href="#contato">CONTATO</a>
                    </li>

                    <li class="abrirlink">
                        <a href="https://identechnology.tomticket.com?account=444224P07112016122136" title="Acessar Help Desk" target="_blank">TICKET<a>
                    </li>                                                                                

                </ul>

            </div>
            <!--FIM MENU LINK-->

        </div>
        <!--FIM DIV CONTAINER ONDE VAI TODAS AS INFORMAÇÕES-->

    </nav>

	 

	Eu tenho esse código abaixo CSS, que funciona um pouco. Só que o ele ja abre com o X.

<style type="text/css">       

.navbar-toggle {
  border: none;
  background: transparent !important;
}

.navbar-toggle:hover {

  background: transparent !important;
}

.navbar-toggle .icon-bar {

  width: 22px;
  transition: all 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);
}

</style>

	Veja a imagem abaixo de quando eu entro no site. Ele entra com o X. E quando eu clico pela primeira vez no X, ele continua o x. E quando pela segunda vez clico no X ou clico em menu da lista ele volta para o HAMBURGUER.

	 

	Para ajudar, segue o link do site.

	[Iden Technology](http://www.identechnology.com/developer/)