Navbar Dropdown List Items Appearing Aligned Left Before Animation - html

Question

I would like my navbar dropdown menu to take up the entire browsing area with the list items centered, and have a brief animation during the transition.
For the animation, I want the .icon-bar hamburger menu to transition to an "X" and for the dropdown menu to have a cubic-bezier transition.
However, the list items first appear aligned left prior to the animation.
Wondering why the list is left-aligned prior to animation.
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: 'Quicksand', sans-serif;
}
body {
margin-top: 60px;
}
#main-wrapper {
display: flex;
flex-direction: column;
min-height: 100%;
}
.container {
margin: 0 auto;
}
.article {
flex: 1;
}
/*START Shrinks the default navbar height*/
.navbar {
//min-height: 30px;
margin: 0px;
width: 100%;
background-color: #444;
//height: 44px;
}
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited {
padding: 4px 5px 0px 5px;
//height: 30px;
color: white;
font-size: 1.1em;
font-weight: 300;
margin: 2px 8px 0 0;
}
/*END*/
.nav.navbar-nav li a:focus,
.nav.navbar-nav li a:active,
.nav.navbar-nav li a:hover {
color: white;
opacity: 0.8;
}
.navbar-toggle {
float: left;
border: none;
margin-top: 10px;
margin-left: 10px;
padding: 4px;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:active,
.navbar-default .navbar-toggle:focus {
background-color: #444;
}
/*Displays navbar dropdown on hover */
ul.nav li.dropdown:hover ul.dropdown-menu {
display: block;
}
.navbar-default .navbar-header .icon-bar {
background-color: white;
width: 22px;
}
.navbar-default .navbar-toggle:hover .icon-bar {
background-color: #EFEFEF;
}
.navbar .navbar-brand {
color: white;
margin: -4px 20px -3px 0;
font-size: 1.7em;
font-family: 'Orbitron', 'Dosis', sans-serif;
}
.navbar .navbar-brand:focus,
.navbar .navbar-brand:hover {
color: white;
opacity: 0.8;
}
.fa-caret-down {
height: 30px;
color: lightGray;
}
/*Change hamburger menu to "x" on click */
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.4s;
}
.navbar-toggle .top-bar {
transform: rotate(405deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-405deg);
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);
}
.navbar.navbar-default .navbar-collapse {
border: none;
box-shadow: none;
}
/*Change Background color of toggle dropdown*/
.collapse.navbar-collapse {
background-color: #444;
min-width: 100%;
min-height: 100%;
}
h3 + p {
line-height: 1.8em;
}
footer {
background-color: #444;
color: white;
height: 250px;
padding: 8px;
}
footer a,
footer a:link,
footer a:visited {
color: white;
text-decoration: none;
}
footer a:hover,
footer a:active,
footer a:focus {
opacity: 0.8;
}
.tagline {
text-align: center;
}
.footer-sub {
border: thin white solid;
margin: 0 2px 7px 0;
max-width: 220px;
}
.fa-plus {
margin-top: 3px;
float: right;
}
.fa-plus:hover {
opacity: 0.8;
cursor: pointer;
}
#location-detail {
display: none;
}
a#location:focus + #location-detail {
display: block;
}
#media (max-width: 992px) {
.navbar-nav > li,
.navbar-nav > li > a,
.navbar-nav > li > a:link,
.navbar-nav > li > a:visited,
.navbar-nav > li > a:hover {
font-size: 1.05em;
}
}
#media (max-width: 767px) {
.navbar .navbar-brand {
position: absolute;
left: 50%;
margin-left: -110px !important;
display: block;
}
.collapse.navbar-collapse {
background-color: #444;
position: fixed;
min-width: 100%;
min-height: 100%;
font-size: 1.3em;
text-align: center;
padding-top: 20px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.collapse.navbar-collapse li {
margin-bottom: 15px;
}
}
<div id="main-wrapper">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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>
<!--<img class="logo" src="../images/eclipse-new.png"/> -->
Eclipse Music
</div> <!-- end of navbar-header -->
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<!--<li><span class="glyphicon glyphicon-home"></span>Home</li>-->
<li>Effects</li>
<li>Guitar</li>
<li>Bass</li>
<li>Amps</li>
<li>Lessons</li>
<li class="dropdown">
About<!-- <i class="fa fa-caret-down"></i>-->
<ul class="dropdown-menu">
<li>Directions</li>
<li>Contact Us</li>
<li>Blog</li>
</ul>
</li>
</ul>
</div> <!-- end of collapse navbar-collapse -->
</div> <!-- end of container -->
</div> <!-- end of navbar navbar-default navbar-fixed-top -->
<div class="article">
<div class="container">
<h2>
Welcome!
</h2>
<br />
</div>
</div> <!-- END of article -->
<footer>
</footer> <!-- END of footer -->
</div> <!-- END of main-wrapper -->

Answer 1

Just add this css in your media query for Xs :
#media (max-width: 767px) {
.navbar .navbar-brand {
position: absolute;
left: 50%;
margin-left: -110px !important;
display: block;
}
.navbar-collapse {
text-align: center;
}
.navbar-collapse li{display:none}
.collapse.navbar-collapse {
background-color: #444;
position: fixed;
min-width: 100%;
min-height: 100%;
font-size: 1.3em;
padding-top: 20px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.collapse.navbar-collapse li {
display:block;
margin-bottom: 15px;
}
}
Here is a bootply with this change : http://www.bootply.com/BQGSpd2kLt

Answer 2

I could be wrong, but it might be this:
.navbar-toggle {
float: left;
border: none;
margin-top: 10px;
margin-left: 10px;
padding: 4px;}
May want those to be something more like this:
.navbar-toggle {
float: right;
border: none;
position: relative;
left: -50%; //or right 50%
text-align: left;
padding: 4px;}