Center nav-brand and menu between 767px and 992px - css

Question

I read other questions here on stackoverflow but I can't figure out (not working), how to center a navbar menu and logo between 767px and 992px for mobile devices...
For PC is:
----------- simple links menu--
-- logo ------------- navmenu--
...and for small devices > 767px and < 992px should be in 3 lines, all centered:
------ simple links menu ------
-------------- logo -----------
------------ navmenu ----------
Under 767px it's good - there is a collapse menu...
Here is code only for header nav and full css:
#import url("http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic");
#import url("http://fonts.googleapis.com/css?family=Lato:400,700,400italic");
/* ------------------------------------------------------------------
General Styles
------------------------------------------------------------------ */
body {
background: #212121;
overflow-x: hidden;
-ms-overflow-style: scrollbar;
font: 400 16px/1.8 "Lato", sans-serif;
color: #eee;
}
img {
max-width: 100%;
height: auto;
}
iframe {
border: 0;
}
/* ------------------------------------------------------------------
Selection
------------------------------------------------------------------ */
::-moz-selection {
background: #000;
color: #fff;
}
::-webkit-selection {
background: #000;
color: #fff;
}
::selection {
background: #000;
color: #fff;
}
/* ------------------------------------------------------------------
Transition elsements
------------------------------------------------------------------- */
a,
.btn {
-webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
/* ------------------------------------------------------------------
Reset box-shadow
------------------------------------------------------------------- */
.btn,
.well,
.panel,
.progress,
.form-control, .form-control:hover, .form-control:focus {
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
/* ------------------------------------------------------------------
Reset border-radius
------------------------------------------------------------------- */
.well, .label, .alert,
.modal-content {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
/* ------------------------------------------------------------------
Typography
------------------------------------------------------------------- */
a {
color: rgba(17, 17, 17, 0.55);
}
a:hover, a:focus {
text-decoration: none;
color: #fafafa;
outline: 0;
}
/* ------------------------------------------------------------------
Tabs and Accordion
------------------------------------------------------------------- */
.nav-tabs {
border-color: #fafafa;
}
.nav-tabs > li > a {
font-size: 12px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
.nav-tabs >li.active > a,
.nav-tabs >li.active > a:hover,
.nav-tabs >li.active > a:focus {
border: 1px solid #fafafa;
border-bottom-color: transparent;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
background: #fafafa;
}
.tab-content {
border: 1px solid #fafafa;
border-top: 0;
padding: 15px;
}
.tab-content :last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------------
Navigation
------------------------------------------------------------------- */
.navbar-custom {
-webkit-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-moz-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
-o-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}
.navbar-custom {
background: #212121;
border: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.navbar-custom .navbar-brand {
float: none;
height: 60px;
display: table-cell;
vertical-align: middle;
padding-top: 0;
padding-bottom: 0;
letter-spacing: 4px;
font-weight: 400;
font-size: 20px;
color: #fafafa;
}
.navbar-custom a,
.navbar-custom .navbar-brand {
color: #fafafa;
-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
transition: none;
}
.navbar-custom .nav li > a {
position: relative;
}
.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .dropdown-menu > li > a:focus,
.navbar-custom .dropdown-menu > li > a:hover {
background: none;
color: #757575;
}
/* Navbar toggle */
.navbar-custom .navbar-toggle {
margin-top: 13px;
}
.navbar-custom .navbar-toggle .icon-bar {
background: #bdbdbd;
}
/* Navbar dropdown */
.navbar-custom .dropdown-menu {
background: #212121;
border: 1px solid rgba(0, 0, 0, 0.05);
border-radius: 0;
padding: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #fafafa;
white-space: nowrap;
}
.navbar-custom .dropdown-menu > li > a {
border: 0;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 10px;
padding: 11px 15px;
}
.navbar-custom .dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
right: auto;
margin-top: -1px;
}
.leftauto {
right: 0 !important;
left: auto !important;
}
.navbar-custom .dropdown-menu.left-side {
right: 100%;
left: auto;
}
.navbar-custom .dropdown-toggle:after {
position: absolute;
display: block;
right: 0;
top: 50%;
margin-top: -5px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle {
padding-right: 28px;
}
.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle:after {
position: absolute;
display: block;
right: 15px;
top: 50%;
margin-top: -5px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 9px;
content: "\f107";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.light-logo {
display: none !important;
}
.navbar-transparent.navbar-dark .light-logo {
display: block !important;
}
.navbar-transparent.navbar-dark .dark-logo {
display: none !important;
}
/* Push search */
.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle.search-dropdown:after {
content: "";
}
.dropdown-search {
position: relative;
padding: 7px 5px;
}
.dropdown-search .form-control {
position: relative;
}
.dropdown-search .search-btn {
position: absolute;
background: transparent;
border: none;
overflow: hidden;
top: 50%;
right: 0px;
width: 42px;
height: 32px;
line-height: 30px;
font-size: 14px;
outline: none;
color: #fafafa;
margin-top: -16px;
}
/* ------------------------------------------------------------------
Hero
------------------------------------------------------------------- */
.module-hero {
position: relative;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.hero-caption {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.hero-text {
position: relative;
display: table-cell;
vertical-align: middle;
height: 100%;
}
/* Hero caption sizes */
.mh-line-size-1,
.mh-line-size-2,
.mh-line-size-3,
.mh-line-size-4,
.mh-line-size-5,
.mh-line-size-6 {
font-weight: 700;
opacity: 0.99;
margin: 0;
}
.mh-line-size-1 {
letter-spacing: 50px;
font-size: 26px;
}
.mh-line-size-2 {
letter-spacing: 40px;
font-size: 24px;
}
.mh-line-size-3 {
letter-spacing: 12px;
font-size: 22px;
}
.mh-line-size-4 {
letter-spacing: 8px;
font-size: 14px;
}
.mh-line-size-5 {
letter-spacing: 6px;
font-size: 12px;
}
.mh-line-size-6 {
font-weight: 400;
font-size: 16px;
}
/* ------------------------------------------------------------------
Modules
------------------------------------------------------------------- */
.amber {color: ;}
.wrapper {
background: #212121;
overflow: hidden;
margin: 0 auto;
width: 100%;
}
.module,
.module-small {
padding: 140px 0;
position: relative;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.module-small {
padding: 70px 0;
}
.navbar-custom + .module {
padding: 200px 0;
}
.navbar-custom + .module-small {
padding: 130px 0;
}
.module-parallax {
background-attachment: fixed;
}
/* Module titles */
.module-title {
text-transform: uppercase;
letter-spacing: 10px;
text-align: center;
font-size: 20px;
margin-bottom: 70px;
}
.module-subtitle {
text-align: center;
font-size: 15px;
margin-bottom: 70px;
}
.module-icon {
font-size: 36px;
margin-bottom: 70px;
}
.module-title + .module-subtitle {
margin-top: -35px;
}
.divider {
margin: 0;
}
.copyright {
padding: 0 5px;
}
/* -------------------------------------------------------------------
Responsive Media Queries
------------------------------------------------------------------- */
#media (min-width: 768px) {
/* Navbar */
.navbar-nav {
margin: 5px -15px;
}
.navbar-custom .navbar-brand {
padding-left: 0;
}
.navbar-custom .navbar-nav > li > a {
padding-top: 20px;
padding-bottom: 20px;
}
.navbar-transparent {
background: transparent;
padding-top: 15px;
padding-bottom: 15px;
background: transparent;
webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Tra */
.navbar-transparent.navbar-dark .navbar-nav > li > a,
.navbar-transparent.navbar-dark .navbar-brand {
color: #212121;
}
.navbar-transparent.navbar-dark .nav > li > a:focus,
.navbar-transparent.navbar-dark .nav > li > a:hover {
color: rgba(255, 255, 255, 0.75);
}
.navbar-custom .dropdown-menu .dropdown-toggle:after {
position: absolute;
display: block;
right: 9px;
top: 50%;
margin-top: -6px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 12px;
content: "\f105";
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.navbar-custom .dropdown-menu {
position: absolute;
display: block;
visibility: hidden;
opacity: 0;
}
.navbar-custom .open > .dropdown-menu {
visibility: visible;
opacity: 1;
}
.navbar-right .dropdown-menu {
right: auto;
left: 0;
}
/* Comments */
.comment .comment {
margin-left: 100px;
}
}
#media (max-width: 992px) {
/* Hero captions */
.mh-line-size-1 {
letter-spacing: 40px;
font-size: 26px;
}
.mh-line-size-2 {
letter-spacing: 28px;
font-size: 20px;
}
.mh-line-size-3 {
letter-spacing: 20px;
font-size: 22px;
}
.mh-line-size-4 {
letter-spacing: 8px;
font-size: 16px;
}
.navbar-custom {
letter-spacing: 1px;
font-size: 12px;
}
/* Portfolio grid */
.work-item,
.grid-sizer {
width: 33.3333%;
}
.work-item.wide,
.work-item.wide-tall {
width: 66.6666%;
}
}
#media (max-width: 767px) {
/* Navbar */
.navbar-custom {
letter-spacing: 2px;
font-size: 10px;
}
.navbar-transparent.navbar-dark .light-logo {
display: none !important;
}
.navbar-transparent.navbar-dark .dark-logo {
display: block !important;
}
.navbar-custom .navbar-nav .open .dropdown-menu > li > a,
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header {
padding: 10px 25px;
}
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu .dropdown-header,
.navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu > li > a {
padding: 10px 35px;
}
.navbar-custom .dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown-toggle:after {
right: 15px;
content: "\f107";
}
.navbar-custom .nav > .open >.dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown.open .dropdown-toggle:after {
right: 15px;
content: "\f106";
}
/* Hero captions */
.mh-line-size-1 {
letter-spacing: 24px;
font-size: 26px;
}
.mh-line-size-2 {
letter-spacing: 16px;
font-size: 15px;
}
.mh-line-size-3 {
letter-spacing: 14px;
font-size: 14px;
}
.mh-line-size-4 {
letter-spacing: 4px;
font-size: 14px;
}
.mh-line-size-5 {
letter-spacing: 2px;
font-size: 13px;
}
.mh-line-size-6 {
font-size: 13px;
}
/* Portfolio filters */
.filters li {
display: block;
margin: 0 10px 10px;
}
.filters li:last-child {
margin: 0 10px 140px;
}
/* Portfolio grid */
.work-item,
.grid-sizer {
width: 50%;
}
.work-item.wide,
.work-item.wide-tall {
width: 100%;
}
}
#media (max-width: 500px) {
/* Hero captions */
.mh-line-size-1 {
letter-spacing: 12px;
font-size: 26px;
}
.mh-line-size-2 {
letter-spacing: 6px;
font-size: 14px;
}
.mh-line-size-3 {
letter-spacing: 4px;
font-size: 13px;
}
.mh-line-size-4 {
letter-spacing: 4px;
font-size: 12px;
}
.mh-line-size-5 {
letter-spacing: 2px;
font-size: 11px;
}
.mh-line-size-6 {
font-size: 12px;
}
/* Portfolio grid */
.work-item,
.grid-sizer {
width: 100%;
}
.work-item.wide,
.work-item.wide-tall {
width: 100%;
}
}
/* -------------------------------------------------------------------
Multi-columns-row
------------------------------------------------------------------- */
.multi-columns-row .first-in-row {
clear: left;
}
.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: left; }
#media (min-width: 768px) {
.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: none; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: none; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: none; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: none; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: none; }
.multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; }
}
#media (min-width: 992px) {
.multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: none; }
.multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: none; }
.multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: none; }
.multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: none; }
.multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: none; }
.multi-columns-row .col-md-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-md-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-md-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-md-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-md-1:nth-child(12n + 13) { clear: left; }
}
#media (min-width: 1200px) {
.multi-columns-row .col-md-6:nth-child(2n + 3) { clear: none; }
.multi-columns-row .col-md-4:nth-child(3n + 4) { clear: none; }
.multi-columns-row .col-md-3:nth-child(4n + 5) { clear: none; }
.multi-columns-row .col-md-2:nth-child(6n + 7) { clear: none; }
.multi-columns-row .col-md-1:nth-child(12n + 13) { clear: none; }
.multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; }
}
.et-icons .box1 {
border: 1px solid #fafafa;
display: block;
width: 25%;
float: left;
padding: 0;
font-size: 13px;
margin: -1px 0 0 -1px;
}
.et-icons .box1 > span {
display: inline-block;
border-right: 1px solid #fafafa;
min-width: 60px;
min-height: 60px;
text-align: center;
line-height: 60px;
font-size: 28px;
margin-right: 5px;
}
.fa-icons {
padding: 0 15px;
}
.fa-icons > div {
padding: 0;
border: 1px solid #fafafa;
margin: -1px 0 0 -1px;
font-size: 13px;
}
.fa-icons > div > i {
display: inline-block;
margin-right: 5px;
min-width: 40px;
min-height: 40px;
border-right: 1px solid #fafafa;
line-height: 40px;
text-align: center;
font-size: 14px;
}
/* ------- CUSTOM Styles ------*/
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small {
font-weight: normal;
line-height: 1;
color: #9e9e9e;
}
.amber {color: #EB9532;}
.text-21 {color: #212121 !important;}
.bk h1, .bk .h1,
.bk h5, .bk .h5
{
line-height: 1.4;
font-weight: bold;
color: #212121 !important;
}
.module-divider {
height: 20px;
width: 100%;
background-color: #212121;
}
.vofset { padding-top: 5px !important; padding-bottom: 5px !important;}
.vofset0 { padding-top: 0px; }
.vofset1 { padding-top: 10px; }
.vofset2 { padding-top: 20px; }
.vofset3 { padding-top: 30px; }
.vofset4 { padding-top: 40px; }
.vofset5 { padding-top: 50px; }
.vofset7 { padding-top: 70px; }
.vofset10 { padding-top: 100px; }
.vofset12 { padding-top: 120px; }
.vofset14 { padding-top: 140px; }
.lofset1 { padding-bottom: 10px; }
.lofset2 { padding-bottom: 20px; }
.lofset3 { padding-bottom: 30px; }
.lofset4 { padding-bottom: 40px; }
.lofset5 { padding-bottom: 50px; }
.lofset7 { padding-bottom: 70px; }
.lofset10 { padding-bottom: 100px; }
.lofset12 { padding-bottom: 120px; }
.lofset14 { padding-bottom: 140px; }
.img-responsive,
.thumbnail > img,
.thumbnail a > img,
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
.navbar {
min-height: 90px;
}
.navbar-custom {
padding-top: 10px;
}
.navbar-top {
padding: 5px 0px;
margin: 0px -15px;
position: relative;
background-repeat: no-repeat;
text-transform: uppercase;
letter-spacing: 0px;
text-align: right;
font-size: 10px;
color: #9e9e9e;
background: #212121;
}
.navbar-top a {
margin: 0px 0px 0px 15px !important;
color: #9e9e9e;
text-decoration: none;
text-transform: uppercase;
font: "Lato", sans-serif;
line-height: 20px;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transition-delay: 0s;
transition-duration: 0s;
transition-property: none;
transition-timing-function: ease;
}
.navbar-top a:hover {
color: #eee;
}
.navbar-custom .navbar-toggle .icon-bar {
background: #e9e9e9;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 8px;
}
.navbar-toggle .icon-bar {
margin-top: 3px;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
<!-- NAVIGATION -->
<nav class="navbar navbar-custom navbar-fixed-top">
<div class="container">
<div class="row">
<div class="col-xs-12 navbar-top hidden-xs">
Simple Links Here
</div>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#custom-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- YOU LOGO HERE -->
<a class="navbar-brand" href="index.html">
<!-- IMAGE OR SIMPLE TEXT -->
<img class="dark-logo" src="assets/images/top_logo_3.png" width="220" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="custom-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Home
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
Multi Page
<ul class="dropdown-menu">
<li>Parallax</li>
<li>Film overlay</li>
<li>Slider</li>
<li>Text rotator</li>
<li>Youtube background</li>
</ul>
</li>
<li class="dropdown">
One page
<ul class="dropdown-menu">
<li>Parallax</li>
<li>Film overlay</li>
<li>Slider</li>
<li>Text rotator</li>
<li>Youtube background</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
Pages
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
About
<ul class="dropdown-menu">
<li>About 1</li>
<li>About 2</li>
</ul>
</li>
<li class="dropdown">
Services
<ul class="dropdown-menu">
<li>Services 1</li>
<li>Services 2</li>
</ul>
</li>
<li class="dropdown">
Contact
<ul class="dropdown-menu">
<li>Contact 1</li>
<li>Contact 2</li>
</ul>
</li>
<li class="dropdown">
Pricing
<ul class="dropdown-menu">
<li>Pricing 1</li>
<li>Pricing 2</li>
</ul>
</li>
<li>Login / Register</li>
<li>FAQ</li>
</ul>
</li>
<li class="dropdown">
Features
<ul class="dropdown-menu" role="menu">
<li>Buttons</li>
<li>Icons</li>
<li>Content boxes</li>
<li>Typography</li>
<li>Progress bars</li>
<li>Tab & Accordian</li>
<li>Pricing tables</li>
<li>Modules & Overlays</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<!-- /NAVIGATION -->

Answer 1

Is this what you want?
Put this code:
#media only screen and (max-width: 992px){
.navbar-header {
margin: 0 auto;
text-align: center;
width: 50%;
}
.navbar-brand {
display: inline-block;
}
img.dark-logo {
text-align: center;
}
div#custom-collapse {
margin: 0 auto;
width: 50%;
}
.nav .navbar-nav .navbar-right {
width: 50%;
margin: 0 auto;
}
}