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

Boa madruga 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.

	 

<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>

    <!--INICIO NAV BAR ONDE FICA OS DADOS DO MENU-->
    <nav class="navbar navbar-default navbar-fixed-top" style="border-bottom: 3px solid #ff330d;">
        
        <!--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 collapsed" 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.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="">FRUTAS EXÓTICAS</a>
                    </li>
                    <li class="menu">
                        <a href="">FRUTAS FRESCAS</a>
                    </li>
                    <li class="dropdown menu">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">EMBALADOS</a>
                        <ul class="dropdown-menu">
                        
                        <!--<div class="clearfix"></div>-->
                        <div id="sazonalidade" class="sazonalidade" style="margin-left:18px;">
                            <div href="letraE" class="sim">J</div>
                            <div class="sim">F</div>
                            <div class="sim">M</div>
                            <div class="sim"><a href="#letraB">B</a></div>
                            <div class="sim">M</div>
                            <div class="sim"><a href="#letraC">C</a></div>
                            <div class="sim">J</div>
                            <div class="sim"><a href="#letraA">A</a></div>
                            <div class="sim">S</div>
                            <div class="sim"><a href="#letraE">E</a></div>
                            <div class="sim">N</div>
                            <div class="sim"><a href="#letraD">D</a></div>
                        </div>
                                                
                        </ul>
                    </li>                    
                    <li class="dropdown menu">
                      <a class="dropdown-toggle" data-toggle="dropdown" href="#">FAMÍLIAS<span class="caret"></span></a>
                      <ul class="dropdown-menu">
                      
                          <li><a familia="5">Kiwis</a></li><br/>
                          <li><a familia="1">Maçãs</a></li><br/>
                          <li><a familia="2">Mangas</a></li><br/>
                          <li><a familia="3">Melões</a></li><br/>
                          <li><a familia="7">Pêras</a></li><br/>
                          <li><a familia="4">Pimentões</a></li><br/>
                          <li><a familia="8">Uvas</a></li><br/>
                          
                      </ul>
                    </li>

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

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

                </ul>

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

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

    </nav>
    <!--FIM NAV BAR ONDE FICA OS DADOS DO MENU-->

	 

	Nesse outro artigo, foi so colocar a classe

collapsed
no buttom e deu certo.

Mas nesse aqui não deu certo.

O que poderia ser?

Segue o link

Erro Menu Hamburguer