Change navigation bar position in Bootstrap3 - responsive-design

Question

I am new to Boot Strap 3. Working on Responsive Layout.
I have a logo centered aligned and below that a navigation bar which has few links e.g. "About Us" "Contact Us" "FAQ", etc.
My Requirement is
Above 1024 resolution the navigation bar should appear below logo in a bar.
Below 1024 resolution it should be collapsed and viewed on right hand side of logo.
Please advise.

Answer 1

1024px is not a breakpoint in the Bootstrap default configuration. You can customize the breakpoint of when the mobile navbar kicks in at the http://getbootstrap.com/customize/ but it affects when everything breaks down to mobile. The default is 768px. So in the un-modified Bootstrap default everything (all forms, collapse, navbar-text, and so on) has to be changed along with the max-width of same, when applicable, so that is 767px. If you don't use LESS then this is a pain.
This only works if you adjust all the CSS break the navbar at the points indicated in the paragraph above. In the Bin below, that's been done, you will need to search for 1023px and 1024px to see where those are located in your installation of Bootstrap. Make a backup. Also, when you update to 3.1.0 in a few days, you'll need to do this again unless you use LESS, which will make short work of this.
DEMO: http://jsbin.com/AsaRofuW/1/
EDIT: http://jsbin.com/AsaRofuW/1/edit
This is the HTML structure to center a logo below the navigation. It does not differ from the docs, except that it adds the image.
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="yourlink.html" class="navbar-brand">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png" alt="company name">
</a>
</div><!--/.navbar-header-->
<div id="nav-collapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Anchor 1</li>
<li>Anchor 2</li>
<li>Anchor 3</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Test</li>
<li>Another link</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul><!--/.navbar-nav-->
</div><!--/.nav-collapse -->
</div><!--/.container-->
</div><!--/.navbar-->
CSS
This CSS uses the min-width 1024px. For default Boostrap 3.0.3 CSS this min-width is 768px. These add styles that differ from yours and the default bootstrap, you can remove, adjust or whatever.
/* logo container padding on right so it doesn't hit the toggle */
.navbar-brand {
text-decoration: none;
padding-right: 80px;
float: left;
width: 70%; /* adjust as needed */
}
/* logo image */
.navbar-brand img {
max-width: 100%;
min-width: 90px;
max-height: 50px;
}
/* so that the navbar has some bottom white space */
.main-page {
margin-top: 20px
}
.navbar-toggle {
position:absolute;
right:0;
top:10px;
}
#media (min-width:1024px) {
.navbar-header {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: -120px;
/*logo position */
}
/* hide logo after scroll past navbar height */
.showlogo {
display: none
}
.navbar-collapse {
float: left;
width: 100%;
margin: 0;
position: relative;
margin-top: -50px;
padding-top: 50px;
}
/* brand for tablet and up */
.navbar-brand {
text-align: center;
float: none;
width: 100%;
padding: 0;
}
.navbar-brand img {
max-height: 80px
}
/* centered navigation */
.nav.navbar-nav {
float: left;
background: transparent!important;
}
.nav.navbar-nav > li:not(.dropdown) > a:after {
content: "/";
display: inline-block;
padding-left: 30px;
margin-right: -30px;
}
.nav.navbar-nav > li:last-child:not(.dropdown) > a:after {
content: ""
}
.nav.navbar-nav > li.active > a,
ul.nav.navbar-nav > li.dropdown.open > a.dropdown-toggle {
background: transparent;
position: relative;
}
.nav.navbar-nav li.dropdown > ul {
left: 15px
}
.nav.navbar-nav {
clear: left;
float: left;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
.nav.navbar-nav > li {
position: relative;
right: 50%;
padding-left: 15px;
padding-right: 15px;
}
.nav.navbar-nav li {
text-align: left
}
/* page styles */
.main-page {
margin-top: 150px
}
}
Note: Responsive utilities won't work inside your navbar because the media queries are changed. Lots more work to fix those, which you will need to figure out. Probably requires making two sets (about 400 more lines of CSS and isolating with a .navbar preceding the class).

Answer 2

Since you're new to bootstrap, I think sticking to an existing breakpoint would be wise, like you have in your example link.
Try putting the logo in your html twice, and show/hide either one with css via media queries matching that same breakpoint. See: http://bootply.com/103276.