Animate bootstrap burger menu to cross - html

Question

I'm trying to animate my burger icon on the bootstrap menu to become a cross when the menu is displayed.
It's working correctly once the menu is displaying but it shouldnt initially display the cross. anyone know how i can make it show the burger menu rather than the cross initially?
CSS changing it from burger to cross.
.navbar-toggle {
border: none;
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);
}

Answer 1

Your CSS is not the issue, it's your HTML.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> should be <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 be <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 > a {
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 > a {
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 a {
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 > a {} #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 > a {
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 a {
padding-right: 5px !important;
}
#site-nav .linkedin a {
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 a {
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 and (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 and (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: all 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 For 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>

Answer 2

I have inspected the menu elements on your website. Don't worry it is very easy to solve this problem. The problem is that you omit to add collapsed class to the button.navbar-toggle element. This way will solve your problem perfectly. Hope that helps.