Check out this page http://getbootstrap.com/css/ and view bootstrap's "Grid System". This will help you understand rows and columns. As for your custom css I agree with the above answer. You must have your style sheet after the bootstrap stylesheet in the head.
The logo and the search bar should not be wrapped in a nav tag. http://www.w3schools.com/TAgs/tag_nav.asp Check this page out for a good definition on the use of nav. The nav should only wrap your site navigation or other main/utility site navigation. In this instance it would be your about, blog, resume and portfolio.
Bootstrap makes it easy to create fluid layouts. So you should be careful trying to override the code. Based on the code you provided and the question you are asking I would try wrapping everything like I have below. This will put everything on the same row and help you position like you want. You can then wrap everything in your tags and style how you want. Just remember bootstrap is a fluid and responsive layout.
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Logo tags and code goes heare</div>
<div class="col-md-4">Navigation and tags goes here</div>
<div class="col-md-4">Search code and tags goes here</div>
</div>
</div>
I would recommend setting the .img-responsive to your logo to keep it fluid. In js fiddle I noticed there was problems with the logo overlapping your navigation. I think this is because you provided fixed dimensions. Also, you are setting things to position relative when you may not need to. Let me know if you need further explanation.
Hope this helps!
EDIT: okay so after reviewing your question one more time and looking over your new code in jsfiddle I came up with this solution: https://jsfiddle.net/8yufLL4n/embedded/result/
here is link to editable jsFiddle code: https://jsfiddle.net/8yufLL4n/
I used a few resources for this: http://getbootstrap.com/components/#navbar-default I copied the code over from bootstrap and I made slight alterations to fit what I think you are trying to do. Now on large screens and normal tablet view the logo, navigation and search form all sit in the same row. As you adjust the screen size this changes like in all fluid and responsive designs. To get the dropdown working you will have to add javascript. This link should help: http://getbootstrap.com/javascript/#dropdowns
Here is the html:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img alt="Brand" src="http://i.imgur.com/jeJYf95.gif" class="img-responsive" id="brandImage" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Blog <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Resume <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
And the css:
.container {
background:#30302f;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
#brandImage {
max-width:60%;
}
@media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
@media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Notice that I use media queries to style it at different screen sizes. I am not trying to make drastic changes to the bootstrap css. Instead, try adding id or classes to the elements that you need to style (like what I did with menuIcon and brandImage). Try making small changes one at a time to see how it effects the design.
Let me know if this helps!
