Bootstrap 3 navbar keeps dropping below brand before collapsing

Question

My navbar is located in the right of the container and my logo/brand is on the left. Whenever I make the browser window smaller, the navbar starts to move towards the brand, just like it's supposed to. However, it will end up dropping below the brand before finally collapsing. I feel like the problem as something to do with padding added to the navbar anchors.

HTML:

<nav class='navbar'>
        <div class="container-fluid">

            <div class='navbar-header'>
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <i class="fa fa-bars fa-2x"></i>
                </button>
                <a class="navbar-brand" href="#"><img src='img/mobius2.png' /></a><a class="navbar-brand" href="#">TIMOTHY WOJTYLAK<span>WEB DESIGNER & DEVELOPER</span></a>
            </div>

            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li class='activeNavLink'><a href="#">HOME</a></li>
                    <li class='skillSection'><a href="#skillSection">SKILLS</a></li>
                    <li class='projects'><a href="#section1">PROJECTS</a></li>
                    <li class='contact'><a href="#map">CONTACT</a></li>
                    <li class='resume'><a href="#contactForm">RESUME</a></li>
                </ul>
            </div>
        </div>
    </nav> 

CSS:

.navbar {
    width: 80%;
    margin: auto auto;}
.navbar img {}
.navbar a.navbar-brand {
    font-family: 'worksans-bold';
    font-size: 16px;
    color: #EFEFEF;}
.navbar a.navbar-brand span {
    font-size: 11px;
    display: block;}
#myNavbar li a {
    font-family: 'worksans-bold';
    padding: 20px 25px 40px 25px;
    color: #EFEFEF;}
#myNavbar li a:hover {
    color: #1E90FF;
    background: none;}
.activeNavLink {
    border-bottom: 5px solid #1E90FF;}

Here is a Fiddle of what I mean.

Answer 1

You can use media queries to adjust your padding. See example

.navbar {
  width: 80%;
  margin: auto auto;
}
.navbar img {} .navbar a.navbar-brand {
  font-family: 'worksans-bold';
  font-size: 16px;
  color: #EFEFEF;
}
.navbar a.navbar-brand span {
  font-size: 11px;
  display: block;
}
#myNavbar .navbar-nav > li > a {
  font-family: 'worksans-bold';
  padding: 20px 25px 40px 25px;
  color: #EFEFEF;
}
#myNavbar li a:hover {
  color: #1E90FF;
  background: none;
}
.activeNavLink {
  border-bottom: 5px solid #1E90FF;
}
@media (max-width: 1200px) {
  #myNavbar .navbar-nav > li > a {
    padding: 20px 5px 40px 5px;
  }
}
@media (max-width: 767px) {
  #myNavbar .navbar-nav > li > a {
    padding: 5px 15px;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<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" />
<nav class='navbar'>
  <div class="container-fluid">
    <div class='navbar-header'>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <i class="fa fa-bars fa-2x"></i>

      </button>
      <a class="navbar-brand" href="#">
        <img src='http://placehold.it/50x40' />
      </a><a class="navbar-brand" href="#">TIMOTHY WOJTYLAK<span>WEB DESIGNER & DEVELOPER</span></a>

    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class='activeNavLink'><a href="#">HOME</a>

        </li>
        <li class='skillSection'><a href="#skillSection">SKILLS</a>

        </li>
        <li class='projects'><a href="#section1">PROJECTS</a>

        </li>
        <li class='contact'><a href="#map">CONTACT</a>

        </li>
        <li class='resume'><a href="#contactForm">RESUME</a>

        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 2

Add min-width: 355px; to your navbar-header div