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>
<img src="images/logonav1.png">
</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="#"><B><I>Home</B></I>
</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><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I>
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Collection 1
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia
</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><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
<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><i class="fa fa-calendar-o fa-fw"></i> Account
</li>
<li><i class="fa fa-folder-open-o fa-fw"></i> Users
</li>
<li><i class="fa fa-file-o fa-fw"></i> Login
</li>
</ul>
</li>
</li>
</ul>
<li>About
</li>
<li>Contact us
</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="#"><B><I>Home</B></I>
</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><i class="fa fa-envelope-o fa-fw"></i><B><I>All Collection Portfolio</B></I>
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Collection 1
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i>Collection 2
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i>Collection 3
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i>Cita Tenun Indonesia
</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><i class="fa fa-envelope-o fa-fw"></i> Inbox
</li>
<li><i class="fa fa-pencil-square-o fa-fw"></i> Drafts
</li>
<li><i class="fa fa-paper-plane-o fa-fw"></i> Sent Items
</li>
<li class="divider"></li>
<li><i class="fa fa-trash-o fa-fw"></i> Trash
<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><i class="fa fa-calendar-o fa-fw"></i> Account
</li>
<li><i class="fa fa-folder-open-o fa-fw"></i> Users
</li>
<li><i class="fa fa-file-o fa-fw"></i> Login
</li>
</ul>
</li>
</li>
</ul>
<li>About
</li>
<li>Contact us
</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>
Related
I am using bootstrap. I need to make this responsive but i couldn't handle it. Specially search bar frustrate me.
I want menu elements collapsed under 992px. Waiting for suggestions. Thanks.
CodePen Link
Example Code:
nav.navbar-default {
background-color: #232323;
margin-right: 1px;
border: 0;
}
div.navbar-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
}
div.navbar-wrapper .container {
padding: 0;
}
div.navbar-wrapper .col {
padding: 0;
}
div.navbar-wrapper .col:first-child {
padding-right: 30px;
}
div.navbar-wrapper .menu-middle {
width: 64.66667%;
}
div.navbar-wrapper .menu-right {
width: 10.33333%;
}
div.navbar-wrapper .logo {
background: url(/assets/img/logo.png) center no-repeat;
background-color: #3d3d3d;
min-width: 100%;
min-height: 100%;
height: 134px;
}
div.navbar-wrapper .logo.navbar-brand {
margin-left: 0;
}
div.navbar-wrapper .logo:hover {
background-color: #3d3d3d;
}
div.navbar-wrapper .logo span.brand-name {
position: absolute;
}
div.navbar-wrapper .nav-wrap .top-nav {
height: 36px;
width: 100%;
display: block;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a {
font-size: 12px;
color: #fff;
padding-top: 10px;
padding-bottom: 10px;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a:hover {
color: #999;
}
div.navbar-wrapper .nav-wrap .top-nav > li > a .fa {
padding-right: 5px;
}
div.navbar-wrapper .nav-wrap .top-nav .dropdown {
background-color: #555555;
margin-right: 2.2px;
}
div.navbar-wrapper .nav-wrap .top-nav .navbar-form {
padding: 0;
margin: 0;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control,
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default {
background-color: #555555;
border: none;
-webkit-border-radius: 0;
border-radius: 0;
padding: 20px 32px;
color: #fff;
font-size: 14px;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .form-control:focus,
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default:focus {
-webkit-box-shadow: none;
box-shadow: none;
}
div.navbar-wrapper .nav-wrap .top-nav .nav-search-bar .btn-default {
padding: 9px;
font-size: 16px;
outline: 0;
}
div.navbar-wrapper .nav-wrap .main-nav {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
padding: 24px 0 24px 15px;
}
div.navbar-wrapper .nav-wrap .main-nav > li > a {
font-size: 14px;
font-weight: 700;
color: #fff;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
padding-left: 22px;
padding-right: 22px;
}
div.navbar-wrapper .nav-wrap .main-nav > li > a:hover {
background-color: #00a9df;
}
div.navbar-wrapper .nav-wrap .main-nav > li.active a {
background-color: #00a9df;
}
div.navbar-wrapper .nav-wrap .main-nav > li.active a:hover,
div.navbar-wrapper .nav-wrap .main-nav > li.active a:focus {
color: #fff;
}
div.navbar-wrapper .my-cart-wrap {
background-color: #ff9c00;
min-height: 100%;
height: 134px;
display: table;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap {
display: table-cell;
height: 100%;
text-align: center;
color: #fff;
vertical-align: middle;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a {
color: #fff;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap a:hover {
text-decoration: underline;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap .fa-shopping-cart {
font-size: 18px;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.my-cart {
font-size: 14px;
}
div.navbar-wrapper .my-cart-wrap .shopping-cart-wrap span.cart-item {
font-size: 12px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<!-- NAVBAR -->
<div class="navbar-wrapper">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default navbar-static-top">
<div class="container navbar-wrap">
<div class="navbar-header col col-md-3">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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 logo" href="#"><span class="brand-name">Project name</span></a>
</div>
<div class="col col-md-8 menu-middle">
<div id="navbar" class="navbar-collapse collapse nav-wrap">
<ul class="nav navbar-nav top-nav">
<li><i class="fa fa-user" aria-hidden="true"></i>My Account
</li>
<li><i class="fa fa-heart" aria-hidden="true"></i>My Wishlist
</li>
<li><i class="fa fa-external-link" aria-hidden="true"></i>Checkout
</li>
<li class="dropdown">
USD <span class="caret"></span>
<ul class="dropdown-menu">
<li>TL
</li>
<li>EURO
</li>
</ul>
</li>
<li class="dropdown">
Turkish<span class="caret"></span>
<ul class="dropdown-menu">
<li>English
</li>
</ul>
</li>
<div class="input-group nav-search-bar">
<form class="navbar-form">
<input type="text" class="form-control" placeholder="Enter your keyword">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search" aria-hidden="true"></i></button>
</span>
</form>
</div>
</ul>
<ul class="nav navbar-nav main-nav text-uppercase">
<li class="active">Home
</li>
<li>Living Room
</li>
<li>Bedroom
</li>
<li>Dinning
</li>
<li>Blog
</li>
<li>Contact Us
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<div class="my-cart-wrap col col-sm-1 menu-right">
<div class="shopping-cart-wrap">
<a href="#">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<br>
<span class="my-cart">My Cart</span>
<br>
<span class="cart-item">0 Item</span>
</a>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Example:
Use this code for searchbar.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">#example.com</span>
</div>
//#384a5a clear color
//#2f3f4d dark color
when I hover and click the arrow right: content: "\e080"; get light color : #384a5a,
the background should be the same as the li background: #2f3f4d.
everything it is wroking perfect just this background colour when I hover the li with arrow right: content: "\e080"; get different background.
So what I try to archive is: make the bg colour the same as the li when I hover the arrow right.
jsfiddle: http://jsfiddle.net/Wc4xt/4393/
html:
<div class="sidebar ">
<div class="sidebar-wrapper">
<ul class="sidebar-nav">
<li>test
</li>
<li>
test
</li>
<li>
<i class="pull-left fa-lg fa fa-barcode" aria-hidden="true"></i>
test
</li>
<li>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample1" aria-expanded="true" aria-controls="collapseExample1" class="">tes
</a>
</div>
<div class="collapse-styled collapse in" id="collapseExample1" aria-expanded="true">
test
<a class="current" href="test">test</a>
test
</div>
</li>
<li>
<i class="pull-left fa fa-lg fa-book" aria-hidden="true"></i>
<div class="collapse-link">
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample" class="collapsed">test
</a>
</div>
<div class="collapse-styled collapse" id="collapseExample" aria-expanded="false" style="height: 0px;">
test
test
test
</div>
</li>
<li>
<i class="pull-left fa fa-map" aria-hidden="true"></i>
<a href="test">test
</a>
</li>
</ul>
</div>
</div>
css:
.sidebar-wrapper {
height: 100%;
overflow-y: auto;
background: #384a5a;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav {
font-size: 0.8125em;
}
.sidebar-nav i {
margin-top: 20px;
margin-left: 25px;
color: #3181cc;
}
.sidebar-nav li {
line-height: 60px;
border-bottom: 1px solid #455b6f;
}
.sidebar-nav li:nth-child(1) {
color: #3181cc;
background-color: #273440;
font-size: 1.5em;
height: 65px;
text-indent: 20px;
}
.sidebar-nav li.current {
background: #000;
}
.sidebar-nav li.current a {
color: #ffffff;
border-right: 5px solid #000;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #ffffff;
border-right: 5px solid #3181cc;
background: #2f3f4d;
}
.sidebar-nav li a {
display: block;
height: 65px;
}
.collapse-link a {
background-color: #2f3f4d;
border-right: 5px solid #3181cc;
}
.collapse-link a:after {
font-family: 'Glyphicons Halflings';
content: "\e114";
float: right;
color: #ffffff;
margin-right: 20px;
background-color: #2f3f4d;
}
.collapse-link a.collapsed {
background-color: #384a5a;
border-right: 5px solid #384a5a !important;
}
.collapse-link a.collapsed:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #384a5a !important;
}
.collapse-link a.collapsed:after:hover {
background: #2f3f4d;
}
Working fiddle fiddle
add this css.
.collapse-link a.collapsed:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #2f3f4d !important;
}
.sidebar-nav li a:hover:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
background-color: #2f3f4d !important;
}
please use this style sheet
.collapse-link a.collapsed::after {
background-color: rgba(0, 0, 0, 0);
}
originally i have a progress bar/tab of 4 but i decided to add 1 more, but when i added up the code for the fifth 'tab.' it won't align with the other 4 instead it goes below first 'tab.' question is, how can i make the fifth tab aligned/inline with the other four tabs?
original preview
updated preview
here's the html:
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step4" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" style="pointer-events: none; cursor: default;">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
</div>
CSS:
.wizard {
margin: 20px auto;
background: #fff;
width: 90%;
margin-top: -20px;
margin-left: 85px;
}
.wizard .nav-tabs {
position: relative;
margin: 4px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard > div.wizard-inner {
position: relative;
margin-right:90px;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 100%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs > li.active > a, .wizard .nav-tabs > li.active > a:hover, .wizard .nav-tabs > li.active > a:focus {
color: #FFA53E;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i{
color:#FFA53E;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #F86D18;
}
.wizard li.active span.round-tab i{
color: #F86D18;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs > li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #F86D18;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
margin-right:-10px;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #F86D18;
}
.wizard .nav-tabs > li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs > li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
Your li elements are set to 1/4 of width and you are trying to put 5 elements.
Try:
.wizard .nav-tabs > li {
width: 20%;
}
Hello I have CSS dropdown menu, when I hover with the mouse to the firt item the submenu shows correctly but when I try to go down for example to the last item of the submenu before I get there the submenu gets closed... I can't find what I'm doing wrong Below is my code:
CSS:
#lang_select ul{
padding: 0px;
margin: 0;
border: solid 1px #e1e1e1;
width: 85px;
}
#lang_select li{
display: inline;
position: relative;
}
#lang_select ul ul{
position: absolute;
display: none;
}
#lang_select li:hover ul{
display: block;
}
#lang_select a{
text-decoration: none;
color:#333;
font-family: Open Sans;
font-size:12px;
}
.lang-down{
padding-left:10px;
}
HTML:
<div id="lang_select">
<ul>
<li>
Language <i class="fa fa-angle-down"></i>
<ul>
<li><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span></li>
<li><span class="lang-down"><i class="fa fa-globe"></i> French</span></li>
<li><span class="lang-down"><i class="fa fa-globe"></i> German</span></li>
</ul>
</li>
</ul>
</div>
demo - http://jsfiddle.net/r0bdcn7y/1/
change the css
#lang_select li {
display: inline-block;
position: relative;
width: 100%;
}
#lang_select ul {
padding: 0px;
margin: 0;
border: solid 1px #e1e1e1;
width: 85px;
}
#lang_select li {
display: inline-block;
position: relative;
width: 100%;
}
#lang_select ul ul {
position: absolute;
display: none;
}
#lang_select li:hover ul {
display: block;
}
#lang_select a {
text-decoration: none;
color: #333;
font-family: Open Sans;
font-size: 12px;
}
.lang-down {
padding-left: 10px;
}
<div id="lang_select">
<ul>
<li> Language <i class="fa fa-angle-down"></i>
<ul>
<li><span class="lang-down"><i class="fa fa-globe"></i> Albanian</span>
</li>
<li><span class="lang-down"><i class="fa fa-globe"></i> French</span>
</li>
<li><span class="lang-down"><i class="fa fa-globe"></i> German</span>
</li>
</ul>
</li>
</ul>
</div>
I'm trying to style a select dropdown menu in order to overflow when arriving to 150px height. The problem is that when I apply the overflow: auto property, the after pseudoelement containing an arrow pointing to the select disappears.
Here we've the code:
.dropdown-menu{
background-color:#f2f2f1;
min-width: 100px;
border:none;
border-top:5px solid #b4b4b4;
border-radius:0;
>li>a{
font-size: 14px !important;
color:#818181 !important;
&:hover, &:active{
color:#003e59 !important;
}
}
.divider{
height:2px;
margin: 2px 0;
background-color:#cdcccd;
}
&:after {
bottom: 100%;
left: 25%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #b4b4b4;
border-width: 12px;
margin-left: -12px;
}
}
<div class="input-group">
<label>Jurisdiction</label>
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
Select Jurisdiction <span class="spacer"></span><span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Jurisdiction 1</li>
<li class="divider"></li>
<li>Jurisdiction 2</li>
<li class="divider"></li>
<li>Jurisdiction 3</li>
</ul>
</div>