how to center dropdown navbar, and make it still responsive? i already try almost every method i found on this site, and internet, but still cant fix my problem, 1 method almost fix my problem but make my nav bar not responsive
body {
color: #ffffff;
background-color: #000000;
}
h1 {
color: white;
font-family: "orator std";
font-size: 44px;
letter-spacing: 0px;
line-height: 8px;
}
h2 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
line-height: 1px;
}
h3 {
color: white;
font-family: "orator std";
font-size: 14px;
letter-spacing: 1px;
margin-right: 100px;
margin-left: 100px;
}
h4 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
text-align: center;
}
h5 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
}
.thumbnail {
color: white;
background-color: #414141;
border-color: rgb(44, 44, 44);
}
.thumbnail .caption {
padding: 9px;
color: white;
margin-top: -14px;
}
.navbar-brand {
margin-top: 15px;
max-width: 30px;
padding: 0;
max-height: 30px;
}
.img-responsive {margin:0 auto;
}
.btn {
color: #ffffff;
text-align: center;
}
.btn:active {
color: red !important;
}
.btn:hover {
color: #8E8E8E;
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
vertical-align: center;
text-align: center;
margin-top: 0%;
}
.navbar li a {
color: #ffffff !important;
}
.navbar li a:hover {
color: gray !important;
}
.navbar-inner, .navbar .btn-navbar {
background: #ffffff
}
.navbar-inverse .navbar-nav>li>a {
border-bottom: white !important;
border-radius: 5px !important;
}
.dropdown-menu {
color: #ffffff;
background-color: #000000;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content:" ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -5px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
@media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
#the-slider img{
width: 100%;
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
}
.navbar-nav li{
position: relative
}
.navbar-nav li:not(:last-child):after{
content: '';
position: absolute;
right: 0px;
width: 1px;
height: 50%;
top: 20%;
background: white;
}
.dropdown-menu li:not(:last-child):after{
content: '';
position: absolute;
right: 0px;
width: 0px;
height: 50%;
top: 20%;
background: red;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse"> <!-- start navigation button -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <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="index.html" class="pull-left"><img src="images/logonav1.png"></a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="#"><a href="#"><B><I>Home</B></I></a>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I></a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Collection 1</a>
</li>
<li><a href="collection2.html"><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact us</a>
</li>
</li>
</ul>
</ul>
</div>
</nav> <!-- end navigation button-->
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>The problem is that Boostrap sets the navbar-nav and navbar-nav li elements to float: left;, so it forces both to align left.
You'd need to override the Bootstrap styles for the min-width: 768px media query by setting the float property to none !important on those selectors, and add display: inline-block !important; to the navbar-nav element.
You need to use the media query in order to apply the changes only when the viewport is 768px or bigger.
The CSS rules you need to add to your stylesheet should look like this:
@media (min-width: 768px) {
.navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.navbar-nav {
float: none !important;
}
}
And applied to the HTML:
body {
color: #ffffff;
background-color: #000000;
}
h1 {
color: white;
font-family: "orator std";
font-size: 44px;
letter-spacing: 0px;
line-height: 8px;
}
h2 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
line-height: 1px;
}
h3 {
color: white;
font-family: "orator std";
font-size: 14px;
letter-spacing: 1px;
margin-right: 100px;
margin-left: 100px;
}
h4 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
text-align: center;
}
h5 {
color: white;
font-family: "orator std";
font-size: 19px;
letter-spacing: 0px;
}
.thumbnail {
color: white;
background-color: #414141;
border-color: rgb(44, 44, 44);
}
.thumbnail .caption {
padding: 9px;
color: white;
margin-top: -14px;
}
.navbar-brand {
margin-top: 15px;
max-width: 30px;
padding: 0;
max-height: 30px;
}
.img-responsive {
margin: 0 auto;
}
.btn {
color: #ffffff;
text-align: center;
}
.btn:active {
color: red !important;
}
.btn:hover {
color: #8E8E8E;
}
.navbar {
border-radius: 0px;
border-width: 0px;
margin-top: 20%;
font-family: "Orator Std";
font-size: 18px;
color: #ffffff;
background-color: #000000;
vertical-align: center;
text-align: center;
margin-top: 0%;
}
.navbar li a {
color: #ffffff !important;
}
.navbar li a:hover {
color: gray !important;
}
.navbar-inner,
.navbar .btn-navbar {
background: #ffffff
}
.navbar-inverse .navbar-nav>li>a {
border-bottom: white !important;
border-radius: 5px !important;
}
.dropdown-menu {
color: #ffffff;
background-color: #000000;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0px;
-moz-border-radius: 0px 6px 6px 6px;
border-radius: 0px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0px;
height: 0px;
border-color: transparent;
border-style: solid;
border-width: 5px 0px 5px 5px;
border-left-color: #cccccc;
margin-top: 5px;
margin-right: -5px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #ffffff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0px 6px 6px;
-moz-border-radius: 6px 0px 6px 6px;
border-radius: 6px 0px 6px 6px;
}
@media screen and (max-width: 768px) {
.navbar .navbar-collapse a {
text-align: left;
padding-left: 43%;
}
.dropdown-submenu a {
padding-left: 44%;
}
.navbar .navbar-collapse .dropdown .dropdown-menu a {
padding-left: 45%;
}
}
#the-slider img {
width: 100%;
padding-left: 10%;
padding-right: 10%;
padding-top: 10%;
}
.navbar-nav li {
position: relative
}
.navbar-nav li:not(:last-child):after {
content: '';
position: absolute;
right: 0px;
width: 1px;
height: 50%;
top: 20%;
background: white;
}
.dropdown-menu li:not(:last-child):after {
content: '';
position: absolute;
right: 0px;
width: 0px;
height: 50%;
top: 20%;
background: red;
}
@media (min-width: 768px) {
.navbar-nav > li {
float: none !important;
display: inline-block !important;
}
.navbar-nav {
float: none !important;
}
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav role="navigation" class="navbar navbar-inverse">
<!-- start navigation button -->
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <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="index.html" class="pull-left">
<img src="images/logonav1.png">
</a>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-center">
<li class="#"><a href="#"><B><I>Home</B></I></a>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"><B><I>Collection </B></I><b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I></a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Collection 1</a>
</li>
<li><a href="collection2.html"><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia</a>
</li>
</ul>
</li>
<li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">Things <b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> Inbox</a>
</li>
<li><a href="#"><i class="fa fa-pencil-square-o fa-fw"></i> Drafts</a>
</li>
<li><a href="#"><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Trash</a>
<li class="dropdown-submenu"> <a tabindex="-1" href="#"><i class="fa fa-hand-o-right fa-fw"></i> Profile</a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-calendar-o fa-fw"></i> Account</a>
</li>
<li><a href="#"><i class="fa fa-folder-open-o fa-fw"></i> Users</a>
</li>
<li><a href="#"><i class="fa fa-file-o fa-fw"></i> Login</a>
</li>
</ul>
</li>
</li>
</ul>
<li><a href="#">About</a>
</li>
<li><a href="#">Contact us</a>
</li>
</li>
</ul>
</ul>
</div>
</nav>
<!-- end navigation button-->
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>