I want to add a glyphicon before my navbar items, just like in this page:
http://skywarriorthemes.com/arcane/landing/
Here is my navbar:
HTML:
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li class="navfixborder">Page 3</li>
</ul>
</div>
</div>
</nav>
full with css:
https://jsfiddle.net/Lystef91/
Check the docs!
http://getbootstrap.com/components/ gives this example:
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Assuming you've got the icons included into your page/css already. This will depend on your setup; if you've just installed bootstrap off the shelf, I believe that includes the icons. If I've misunderstood and you're not using bootstrap, the instructions will still be roughly the same. Most icon fonts like this use classes on empty elements, and whichever one you're using will show which class goes to which icon on their demo pages.
I think you are using bootstrap. If that's the case Go to this link and add those classes just like the following.
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><i class="glyphicon glyphicon-home" style = "color : #e98fa0;"></i>Home</li>
<li><i class="glyphicon glyphicon-fire" style = "color : #e98fa0;"></i>Page 1</li>
<li><i class="glyphicon glyphicon-search" style = "color : #e98fa0;"></i>Page 2</li>
<li class="navfixborder"><i class="glyphicon glyphicon-leaf" style = "color : #e98fa0;"></i>Page 3</li>
</ul>
</div>
</div>
</nav>
I hope this helps you.
There Is 2 Way To Do This.
1 ) IN Case Of Using bootstrap Then Use Bootstrap icons Go to below Link: and Just Add Given Classes
http://getbootstrap.com/components/
NOTE: First Add below Bootstrap glyphicon cdn: LINK
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
Example With Bootstrap Glyphicon:
a{
text-decoration: none;
}
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav>li {
position: relative;
display: block;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav>li>a:hover,
.nav>li>a:focus {
text-decoration: none;
background-color: #101014;
}
.nav>li.disabled>a {
color: #777;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: #eee;
border-color: #337ab7;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav>li>a>img {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified>li {
float: none;
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified>.dropdown .dropdown-menu {
top: auto;
left: auto;
}
#media (min-width: 768px) {
.nav-tabs.nav-justified>li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified>li>a {
margin-right: 0;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus {
border: 1px solid #ddd;
}
#media (min-width: 768px) {
.nav-tabs.nav-justified>li>a {
border-bottom: 1px solid #ddd;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus {
border-bottom-color: #fff;
}
}
.nav-pills>li {
float: left;
}
.nav-pills>li>a {
border-radius: 4px;
}
.nav-pills>li+li {
margin-left: 2px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
color: #fff;
background-color: #337ab7;
}
.nav-stacked>li {
float: none;
}
.nav-stacked>li+li {
margin-top: 2px;
margin-left: 0;
}
.nav-justified {
width: 100%;
}
.nav-justified>li {
float: none;
}
.nav-justified>li>a {
margin-bottom: 5px;
text-align: center;
}
.nav-justified>.dropdown .dropdown-menu {
top: auto;
left: auto;
}
#media (min-width: 768px) {
.nav-justified>li {
display: table-cell;
width: 1%;
}
.nav-justified>li>a {
margin-bottom: 0;
}
}
.nav-tabs-justified {
border-bottom: 0;
}
.nav-tabs-justified>li>a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs-justified>.active>a,
.nav-tabs-justified>.active>a:hover,
.nav-tabs-justified>.active>a:focus {
border: 1px solid #ddd;
}
#media (min-width: 768px) {
.nav-tabs-justified>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs-justified>.active>a,
.nav-tabs-justified>.active>a:hover,
.nav-tabs-justified>.active>a:focus {
border-bottom-color: #fff;
}
}
.tab-content>.tab-pane {
display: none;
}
.tab-content>.active {
display: block;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 0px;
}
}
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
#media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container>.navbar-header,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container-fluid>.navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 768px) {
.container>.navbar-header,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container-fluid>.navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
#media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
#media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 1px 0 0;
}
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand>img {
display: block;
}
#media (min-width: 768px) {
.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu>li>a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-nav .open .dropdown-menu>li>a:focus {
background-image: none;
}
}
#media (min-width: 768px) {
.navbar-nav {
margin: 0;
text-align: center;
font-size: .9em;
width: 100%;
font-weight: bold;
text-transform: uppercase;
font-family: Roboto, 'Open Sans', Arial;
}
.navbar-nav>li {
float: none;
display: inline-block;
margin-left: -5px;
border-left: 2px solid #333240;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 45px;
padding-left: 45px;
}
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
#media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-form .form-control-static {
display: inline-block;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group>.form-control {
width: 100%;
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio label,
.navbar-form .checkbox label {
padding-left: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
}
#media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
.navbar-form .form-group:last-child {
margin-bottom: 0;
}
}
#media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
#media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
}
}
#media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-right~.navbar-right {
margin-right: 0;
}
}
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777;
}
.navbar-default .navbar-nav>li>a {
color: #777;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav>.disabled>a,
.navbar-default .navbar-nav>.disabled>a:hover,
.navbar-default .navbar-nav>.disabled>a:focus {
color: #ccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #e7e7e7;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #555;
background-color: #e7e7e7;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #ccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}
.navbar-default .btn-link {
color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
color: #ccc;
}
.navbar-inverse {
background-color: #2a2a34;
border: 2px solid #3b3a4a;
}
.navbar-inverse .navbar-brand {
color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav>li>a {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
color: #fff;
background-color: #212129;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav>.active>a:hover {
background-color: #212129;
}
.navbar-inverse .navbar-nav>.disabled>a,
.navbar-inverse .navbar-nav>.disabled>a:hover,
.navbar-inverse .navbar-nav>.disabled>a:focus {
color: #444;
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #101010;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #3b3a4a;
}
#media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
border-color: #3b3a4a;
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #3b3a4a;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #fff;
background-color: #3b3a4a;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #444;
background-color: transparent;
}
}
.navbar-inverse .navbar-link {
color: #9d9d9d;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}
.navbar-inverse .btn-link {
color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
color: #444;
}
.navfixborder {
border-right: 2px solid #333240;
}
.navbar {
min-height: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><i class="glyphicon glyphicon-home" aria-hidden="true"></i> HOMEPAGE</li>
<li><i class="glyphicon glyphicon-cd"></i> TEAM WARS</li>
<li><i class="glyphicon glyphicon-paperclip"></i> GAMING NEWS</li>
<li class="navfixborder"><i class="glyphicon glyphicon-star"> </i> FORUMS</li>
<li><i class="glyphicon glyphicon-cd"></i> SHOP</li>
<li><i class="glyphicon glyphicon-star"></i> BLOG</li>
<li><i class="glyphicon glyphicon-user"></i> CONTACT</li>
</ul>
</div>
</div>
</nav>
2) IN Case Of Using font Awesome Then Go to below Link:
http://fontawesome.io/icons/
NOTE: First Add below Font Awesome Library and See The Example of Used:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Example with FontAwesome:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home fa-sm" aria-hidden="true"></i> HOMEPAGE</li>
<li><i class="fa fa fa-trophy fa-sm"></i> TEAM WARS</li>
<li><i class="fa fa-bullseye fa-sm"></i> GAMING NEWS</li>
<li class="navfixborder"><i class="fa fa-users fa-sm"> </i> FORUMS</li>
<li><i class="fa fa-shopping-cart fa-sm"></i> SHOP</li>
<li><i class="fa fa-book fa-sm"></i> BLOG</li>
<li><i class="fa fa-envelope fa-sm"></i> CONTACT</li>
</ul>
</div>
</div>
</nav>
Simple example for you (using font font-awesome/4.7.0).
Just two step to use it:
1st reference the font-awesome lib:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
2nd add to each of your menu item like:
<li class="active"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home</li>
.nav {
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.nav>li {
position: relative;
display: block;
}
.nav>li>a {
position: relative;
display: block;
padding: 10px 15px;
}
.nav>li>a:hover,
.nav>li>a:focus {
text-decoration: none;
background-color: #101014;
}
.nav>li.disabled>a {
color: #777;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
background-color: #eee;
border-color: #337ab7;
}
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.nav>li>a>img {
max-width: none;
}
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
}
.nav-tabs>li>a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
}
.nav-tabs>li>a:hover {
border-color: #eee #eee #ddd;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
color: #555;
cursor: default;
background-color: #fff;
border: 1px solid #ddd;
border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
width: 100%;
border-bottom: 0;
}
.nav-tabs.nav-justified>li {
float: none;
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 5px;
text-align: center;
}
.nav-tabs.nav-justified>.dropdown .dropdown-menu {
top: auto;
left: auto;
}
#media (min-width: 768px) {
.nav-tabs.nav-justified>li {
display: table-cell;
width: 1%;
}
.nav-tabs.nav-justified>li>a {
margin-bottom: 0;
}
}
.nav-tabs.nav-justified>li>a {
margin-right: 0;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus {
border: 1px solid #ddd;
}
#media (min-width: 768px) {
.nav-tabs.nav-justified>li>a {
border-bottom: 1px solid #ddd;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus {
border-bottom-color: #fff;
}
}
.nav-pills>li {
float: left;
}
.nav-pills>li>a {
border-radius: 4px;
}
.nav-pills>li+li {
margin-left: 2px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
color: #fff;
background-color: #337ab7;
}
.nav-stacked>li {
float: none;
}
.nav-stacked>li+li {
margin-top: 2px;
margin-left: 0;
}
.nav-justified {
width: 100%;
}
.nav-justified>li {
float: none;
}
.nav-justified>li>a {
margin-bottom: 5px;
text-align: center;
}
.nav-justified>.dropdown .dropdown-menu {
top: auto;
left: auto;
}
#media (min-width: 768px) {
.nav-justified>li {
display: table-cell;
width: 1%;
}
.nav-justified>li>a {
margin-bottom: 0;
}
}
.nav-tabs-justified {
border-bottom: 0;
}
.nav-tabs-justified>li>a {
margin-right: 0;
border-radius: 4px;
}
.nav-tabs-justified>.active>a,
.nav-tabs-justified>.active>a:hover,
.nav-tabs-justified>.active>a:focus {
border: 1px solid #ddd;
}
#media (min-width: 768px) {
.nav-tabs-justified>li>a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs-justified>.active>a,
.nav-tabs-justified>.active>a:hover,
.nav-tabs-justified>.active>a:focus {
border-bottom-color: #fff;
}
}
.tab-content>.tab-pane {
display: none;
}
.tab-content>.active {
display: block;
}
.nav-tabs .dropdown-menu {
margin-top: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
#media (min-width: 768px) {
.navbar {
border-radius: 0px;
}
}
#media (min-width: 768px) {
.navbar-header {
float: left;
}
}
.navbar-collapse {
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
-webkit-overflow-scrolling: touch;
border-top: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: visible;
}
.navbar-fixed-top .navbar-collapse,
.navbar-static-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
padding-right: 0;
padding-left: 0;
}
}
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 340px;
}
#media (max-device-width: 480px) and (orientation: landscape) {
.navbar-fixed-top .navbar-collapse,
.navbar-fixed-bottom .navbar-collapse {
max-height: 200px;
}
}
.container>.navbar-header,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container-fluid>.navbar-collapse {
margin-right: -15px;
margin-left: -15px;
}
#media (min-width: 768px) {
.container>.navbar-header,
.container-fluid>.navbar-header,
.container>.navbar-collapse,
.container-fluid>.navbar-collapse {
margin-right: 0;
margin-left: 0;
}
}
.navbar-static-top {
z-index: 1000;
border-width: 0 0 1px;
}
#media (min-width: 768px) {
.navbar-static-top {
border-radius: 0;
}
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
#media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0;
border-width: 1px 0 0;
}
.navbar-brand {
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
text-decoration: none;
}
.navbar-brand>img {
display: block;
}
#media (min-width: 768px) {
.navbar>.container .navbar-brand,
.navbar>.container-fluid .navbar-brand {
margin-left: -15px;
}
}
.navbar-toggle {
position: relative;
float: right;
padding: 9px 10px;
margin-top: 8px;
margin-right: 15px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar+.icon-bar {
margin-top: 4px;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
.navbar-nav {
margin: 7.5px -15px;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
#media (max-width: 767px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu>li>a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-nav .open .dropdown-menu>li>a:focus {
background-image: none;
}
}
#media (min-width: 768px) {
.navbar-nav {
margin: 0;
text-align: center;
font-size: .9em;
width: 100%;
font-weight: bold;
text-transform: uppercase;
font-family: Roboto, 'Open Sans', Arial;
}
.navbar-nav>li {
float: none;
display: inline-block;
margin-left: -5px;
border-left: 2px solid #333240;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
padding-right: 45px;
padding-left: 45px;
}
}
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
#media (min-width: 768px) {
.navbar-form .form-group {
display: inline-block;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-form .form-control-static {
display: inline-block;
}
.navbar-form .input-group {
display: inline-table;
vertical-align: middle;
}
.navbar-form .input-group .input-group-addon,
.navbar-form .input-group .input-group-btn,
.navbar-form .input-group .form-control {
width: auto;
}
.navbar-form .input-group>.form-control {
width: 100%;
}
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
display: inline-block;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio label,
.navbar-form .checkbox label {
padding-left: 0;
}
.navbar-form .radio input[type="radio"],
.navbar-form .checkbox input[type="checkbox"] {
position: relative;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
}
#media (max-width: 767px) {
.navbar-form .form-group {
margin-bottom: 5px;
}
.navbar-form .form-group:last-child {
margin-bottom: 0;
}
}
#media (min-width: 768px) {
.navbar-form {
width: auto;
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
.navbar-nav>li>.dropdown-menu {
margin-top: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.navbar-fixed-bottom .navbar-nav>li>.dropdown-menu {
margin-bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.navbar-btn {
margin-top: 8px;
margin-bottom: 8px;
}
.navbar-btn.btn-sm {
margin-top: 10px;
margin-bottom: 10px;
}
.navbar-btn.btn-xs {
margin-top: 14px;
margin-bottom: 14px;
}
.navbar-text {
margin-top: 15px;
margin-bottom: 15px;
}
#media (min-width: 768px) {
.navbar-text {
float: left;
margin-right: 15px;
margin-left: 15px;
}
}
#media (min-width: 768px) {
.navbar-left {
float: left !important;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-right~.navbar-right {
margin-right: 0;
}
}
.navbar-default {
background-color: #f8f8f8;
border-color: #e7e7e7;
}
.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}
.navbar-default .navbar-text {
color: #777;
}
.navbar-default .navbar-nav>li>a {
color: #777;
}
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav>.disabled>a,
.navbar-default .navbar-nav>.disabled>a:hover,
.navbar-default .navbar-nav>.disabled>a:focus {
color: #ccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #ddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #ddd;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #888;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #e7e7e7;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
color: #555;
background-color: #e7e7e7;
}
#media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
color: #333;
background-color: transparent;
}
.navbar-default .navbar-nav .open .dropdown-menu>.active>a,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #555;
background-color: #e7e7e7;
}
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-default .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #ccc;
background-color: transparent;
}
}
.navbar-default .navbar-link {
color: #777;
}
.navbar-default .navbar-link:hover {
color: #333;
}
.navbar-default .btn-link {
color: #777;
}
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
color: #333;
}
.navbar-default .btn-link[disabled]:hover,
fieldset[disabled] .navbar-default .btn-link:hover,
.navbar-default .btn-link[disabled]:focus,
fieldset[disabled] .navbar-default .btn-link:focus {
color: #ccc;
}
.navbar-inverse {
background-color: #2a2a34;
border: 2px solid #3b3a4a;
}
.navbar-inverse .navbar-brand {
color: #9d9d9d;
}
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-text {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav>li>a {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav>li>a:hover,
.navbar-inverse .navbar-nav>li>a:focus {
color: #fff;
background-color: #212129;
}
.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav>.active>a:hover {
background-color: #212129;
}
.navbar-inverse .navbar-nav>.disabled>a,
.navbar-inverse .navbar-nav>.disabled>a:hover,
.navbar-inverse .navbar-nav>.disabled>a:focus {
color: #444;
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: #333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #333;
}
.navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border-color: #101010;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:hover,
.navbar-inverse .navbar-nav>.open>a:focus {
color: #fff;
background-color: #3b3a4a;
}
#media (max-width: 767px) {
.navbar-inverse .navbar-nav .open .dropdown-menu>.dropdown-header {
border-color: #3b3a4a;
}
.navbar-inverse .navbar-nav .open .dropdown-menu .divider {
background-color: #3b3a4a;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
color: #9d9d9d;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
color: #fff;
background-color: transparent;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.active>a:focus {
color: #fff;
background-color: #3b3a4a;
}
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:hover,
.navbar-inverse .navbar-nav .open .dropdown-menu>.disabled>a:focus {
color: #444;
background-color: transparent;
}
}
.navbar-inverse .navbar-link {
color: #9d9d9d;
}
.navbar-inverse .navbar-link:hover {
color: #fff;
}
.navbar-inverse .btn-link {
color: #9d9d9d;
}
.navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link:focus {
color: #fff;
}
.navbar-inverse .btn-link[disabled]:hover,
fieldset[disabled] .navbar-inverse .btn-link:hover,
.navbar-inverse .btn-link[disabled]:focus,
fieldset[disabled] .navbar-inverse .btn-link:focus {
color: #444;
}
.navfixborder {
border-right: 2px solid #333240;
}
.navbar {
min-height: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><i class="fa fa-home fa-lg" aria-hidden="true"></i> Home</li>
<li><i class="fa fa-camera-retro fa-lg"></i> Page 1</li>
<li>Page 2</li>
<li class="navfixborder">Page 3</li>
</ul>
</div>
</div>
</nav>
Related
I have a navbar where I show different logos depending on the size of the screen. This is how the html for it looks like:
#media (max-width: 767px) {
.logo-big {
display: block;
}
.logo-small {
display: none;
}
}
The full css is here:
.header {
background-image: url('/img/goal-cover.jpeg');
}
.navbar .navbar-nav > li > a {
color: inherit;
padding-top: 0;
padding-bottom: 0;
font-weight: 400;
font-size: 12px;
border-radius: 3px;
line-height: 58px;
}
b, strong {
font-weight: bold;
color: white;
}
#search {
text-align:center;
text-align: center;
line-height: 57px;
font-size: 16px;
}
input {
width: 200px;
padding: 0 20px;
}
input,
input::-webkit-input-placeholder {
font-size: 16px;
letter-spacing: 0.5px;
border: 0;
background-color: #fff;
color: #3c3e42!important;
}
.btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active, .btn.btn-primary:active:focus, .btn.btn-primary:active:hover, .btn.btn-primary.active:focus, .btn.btn-primary.active:hover, .open > .btn.btn-primary.dropdown-toggle, .open > .btn.btn-primary.dropdown-toggle:focus, .open > .btn.btn-primary.dropdown-toggle:hover, .navbar .navbar-nav > li > a.btn.btn-primary, .navbar .navbar-nav > li > a.btn.btn-primary:hover, .navbar .navbar-nav > li > a.btn.btn-primary:focus, .navbar .navbar-nav > li > a.btn.btn-primary:active, .navbar .navbar-nav > li > a.btn.btn-primary.active, .navbar .navbar-nav > li > a.btn.btn-primary:active:focus, .navbar .navbar-nav > li > a.btn.btn-primary:active:hover, .navbar .navbar-nav > li > a.btn.btn-primary.active:focus, .navbar .navbar-nav > li > a.btn.btn-primary.active:hover, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:focus, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:hover {
background-color: #00bcd4;
color: #FFFFFF;
}
.btn-full-width {
width: 100%;
}
.card {
display: inline-block;
position: relative;
width: 100%;
border-radius: 3px;
background: rgba(41, 39, 39, 0.9);
color: #fff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.card-signup .content {
padding: 0px 30px 0px 30px;
}
.big-logo-circle {
margin: auto;
width: 180px;
height: 180px;
margin-top: 50px;
padding: 20px 0;
border-radius: 50%;
background: rgba(41, 39, 39, 0.9);
display: flex;
align-items: center;
justify-content: center;
}
.signup-page .wrapper .card-signup {
margin: 50px 0 40px;
}
.btn-red {
background: #e90052;
width: 100%;
}
.btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red a:active{
background: rgba(233, 0, 82, 0.8)!important;
}
.btn-blue {
background: #096b7d;
width: 100%;
}
.btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue a:active{
background: rgba(9, 107, 125, 0.8)!important;
}
body {
background-color: #ddd;
}
.navbar-toggle .icon-bar {
background-color: #333;
}
.navbar-nav > li {
line-height: 50px;
position: relative;
margin-left: 15px;
margin-right: 15px;
}
.logo, .navbar-nav > li > .btn {
margin: 0 15px;
height: 41px;
margin-top: 4px;
box-shadow: none;
color: #fff;
}
.logo {
background: transparent;
height: 32px;
margin-top: 5px;
}
.navbar-nav > li > .btn {
background: rgba(0, 188, 212);
display: flex;
align-items: center;
margin-top: 8px!important;
box-shadow: none!important;
width: 100px;
}
.navbar-nav > li > .btn:hover, .navbar-nav > li > .btn:focus, .navbar-nav > li > .btn:active {
box-shadow: none!important;
background: rgba(0, 188, 212, 0.8)!important;
}
.logo-big {
display: none;
}
#media (min-width: 767px) {
.navbar-search-form {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 100%;
float: none;
text-align: center;
padding: 8px 0;
}
.logo {
margin-left: 0;
}
}
#media (max-width: 767px) {
.navbar-search-form {
padding-left: 0;
padding-right: 0;
}
.navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
width: 400px;
}
.logo-big {
display: block;
}
.logo-small {
display: none;
}
}
#media (max-width: 500px) {
.navbar-search-form {
padding-left: 0;
}
.navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
width: 300px!important;
}
}
.navbar .navbar-form .form-group {
margin: 0;
padding: 0;
height: 39px;
border: 1px solid;
border-radius: 3px;
line-height: 39px;
background-color: #fff;
}
.navbar .navbar-form {
margin: 0;
}
.navbar-header {
margin-top: 6px;
}
.navbar-form .input-group {
float: left;
}
.input-group .input-group-addon {
padding: 6px 12px;
color: #00bcd4;
}
.navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
width: 400px;
background-image: none;
}
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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 logo-small" href="{{ url('/') }}">
<img class="logo" src="{{ asset('/img/logo-small.png') }}" alt="logo">
</a>
<a class="navbar-brand logo-big" href="{{ url('/') }}">
<img class="logo" src="{{ asset('/img/m2.png') }}" alt="logo">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<form class="navbar-form navbar-search-form active" role="search">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="material-icons">search</i>
</span>
<input type="text" class="form-control" placeholder="Search for videos or players..." autofocus>
</div>
</div>
</form>
<ul class="nav navbar-nav navbar-right">
<li>
Sign in
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
And I am changing the logos like this in the css as you can see in code snippet.
But the link for the small brand logo is not working, I can't click on it, when I resize the screen to smaller size and get the bigger logo, then I can click on it and it works. Not sure how to fix that, why can't I click on the small logo on bigger screens?
Set your .navbar-header relative and above with z-index.
.navbar-header {
position: relative;
z-index:1;
}
Working Fiddle
I don't really see anything wrong with your code, but why not use bootstrap default classes?
<img src="logo-small.jpg">
<img src="logo-big.jpg">
The problem is your form, you set width of your form to 100% and it is covering your logo on larger screens.
#media (min-width: 767px) {
.navbar-search-form {
width: 300px;
}
}
.navbar .navbar-form {
margin: auto;
}
Change it to for example 300px, add margin auto and see what happens.
Try this as follow:
.logo-big {
float:left
}
I am having difficulty in rendering the dropdown menu properly on my website www.bg-hairsalon.com It is a wordpress website that utilizes the theme Zerif-Lite. It doesn't show the options when I click on the navigation button. However, if I scroll down and then click on the navigation toggle button it displays the menu. I am using android and iphone both to test my website. If you could take a look that would be great. I was using android to test this menu. This doesn't work on iphone as well.
The code I am using for the navigation menu so far is as follows:
Not sure how much of this code do I need.
#media screen and (max-width: 480px){
.navbar {
background: #FFF;
border: 0;
border-radius: 0 !important;
text-align: left;
-webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
}
}
#media screen and (max-width: 480px){
#main-nav {
position: fixed;
width: 100%;
z-index: 1000;
min-height: 75px;
}
}
#media screen and (max-width: 480px){
#main-nav.fixed {
position: fixed;
top: 0;
}
}
.nav li a.nav-active {
color: #b8db4d !important;
}
.nav li a.nav-active:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #b8db4d;
bottom: 0px;
left: 12.5%;
}
.navbar-inverse .navbar-nav >li {
display: inline;
margin-right: 20px;
margin-top: 20px;
}
.navbar-inverse .navbar-nav>li:last-child {
margin-right: 0 !important;
}
.navbar-inverse .navbar-nav>li>a {
color: #404040;
padding: 0;
line-height: 35px;
}
.navbar-inverse .main-navigation ul > li {
display: inline;
margin-right: 20px;
margin-top: 20px;
}
.navbar-inverse .main-navigation > ul > li:last-child {
margin-right: 0 !important;
}
.navbar-inverse .main-navigation > ul > li > a {
color: #404040;
padding: 0;
line-height: 35px;
}
.navbar-inverse .navbar-nav ul.sub-menu {
display: none;
position: absolute; top: 100%;
background:#fff;
width:200px;
box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
}
.navbar-inverse .navbar-nav ul.sub-menu {
margin:0;
}
.navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
position: absolute;
left:100%;
top:0;
}
.navbar-inverse .navbar-nav ul.sub-menu li {
float: none;
position: relative;
list-style:none;
padding:10px;
}
.navbar-inverse .navbar-nav ul.sub-menu li a {
color:#404040;
}
.navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
color:#b8db4d;
}
.navbar-inverse .navbar-nav li:hover > ul.sub-menu {
display: block;
}
.navbar-brand {
height: 76px;
position: relative;
line-height: 45px;
}
.current a {
color: #b8db4d !important;
position: relative;
outline: none;
}
.current:before {
position: absolute;
margin: auto;
z-index: 1;
content: "";
width: 75%;
height: 2px;
background: #b8db4d;
bottom: 0px;
left: 12.5%;
}
.navbar-inverse .navbar-nav>li>a:hover {
color: #b8db4d;
outline: none;
}
#media screen and (max-width: 480px){
.navbar-toggle {
border: 0;
background-color: #808080;
margin-top: 23px;
}
}
.navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
background-color: #b8db4d;
filter: alpha(opacity=100);
opacity: 1;
box-shadow: none;
}
#media screen and (max-width: 480px){
.navbar-toggle.active{
background-color: #b8db4d !important;
}
}
#media screen and (max-width: 480px){
.navbar-toggle.collapsed{
background-color: #808080 !important;
}
}
I'm trying to animate my burger icon on the bootstrap menu to become a cross when the menu is displayed.
It's working correctly once the menu is displaying but it shouldnt initially display the cross. anyone know how i can make it show the burger menu rather than the cross initially?
CSS changing it from burger to cross.
.navbar-toggle {
border: none;
background: transparent !important;
}
.navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
.navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
opacity: 0;
}
.navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
Your CSS is not the issue, it's your HTML.
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse"> should be <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false">.
And <div class="collapse navbar-collapse navbar-ex1-collapse fullwidth navbar-main-collapse"> should be <div class="collapse navbar-collapse fullwidth" id="navbar-main-collapse">
/*--- Navigation styles ---*/
#site-nav .company-logo {
padding-top: 0px;
padding-bottom: 15px;
float: left;
margin-bottom: 5px;
margin-top: 15px;
}
#site-nav .company-logo img {
text-align: left;
}
#site-nav .navbar-nav {
display: block;
float: none;
}
#site-nav .navbar-inverse {
background-color: transparent;
border-color: transparent;
text-align: center;
width: 100%;
box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
}
#site-nav .nav > li > a {
line-height: 1.6em;
text-decoration: none;
font-style: normal;
}
#site-nav .navbar-inverse .navbar-nav>li>a {
color: #8f8e8e;
font-weight: 400;
font-size: 16px;
}
#site-nav .navbar-inverse .navbar-nav>li>a:hover {
color: #022169;
background-color: transparent;
}
#site-nav .navbar-inverse .navbar-nav>li>a:hover,
#site-nav .navbar-inverse .navbar-nav>li>a:focus,
#site-nav .navbar-inverse .navbar-nav>.open>a,
#site-nav .navbar-inverse .navbar-nav>.open>a:hover,
#site-nav .navbar-inverse .navbar-nav>.open>a:focus {
background-color: transparent;
text-decoration: none;
color: #022169;
}
#site-nav .navbar {
margin-bottom: 0px;
}
#site-nav {
position: relative;
border: 0;
background-color: black;
background-color: rgba(35, 35, 35, 1);
}
#site-nav .navbar.navbar-fixed-top {
margin-top: 0px;
box-shadow: rgba(0, 0, 0, 1.0) 0px 2px 2px;
}
#site-nav .navbar-nav > li {
float: none;
display: inline-block;
}
#site-nav .navbar-toggle {
float: right;
text-align: right;
border: 0px;
margin-right: 0px;
margin-top: 38px;
}
#site-nav .navbar-inverse .navbar-toggle:hover,
#site-nav .navbar-inverse .navbar-toggle:focus {
background: none;
}
#site-nav .navbar-nav > li > .dropdown-menu {
border-radius: 0px;
}
#site-nav .dropdown-menu > li > a {
text-align: left;
font-size: 14px;
line-height: 1.8em;
}
#site-nav .dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
text-decoration: none;
background-color: #f2f2f2;
}
#site-nav .company-logo {
text-align: left;
font-family: 'Yanone Kaffeesatz', sans-serif;
padding-bottom: 0px;
margin-bottom: 0px;
}
#site-nav .company-logo a {
color: #022169;
font-size: 16px;
}
#site-nav .company-logo a:hover {
text-decoration: none;
}
#site-nav .company-logo span {
text-align: left;
font-size: 32px;
letter-spacing: 1px;
}
#site-nav .navbar-inverse .navbar-toggle .icon-bar {
background-color: #000;
}
/*--- Responsive Styles ---*/
#media (max-width: 767px) {
#site-nav .navbar-nav {
margin: 0;
}
#site-nav .navbar-nav {
display: block;
width: 100%;
float: left;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
}
#site-nav .navbar-nav > li {
float: none;
display: inline-block;
width: 100%;
}
#site-nav .navbar-collapse {
padding: 0px;
}
#site-nav .navbar-inverse .navbar-nav > li > a {} #site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
text-decoration: none;
}
#site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:hover,
#site-nav .navbar-inverse .navbar-nav .open .dropdown-menu>li>a:focus {
color: #022169;
text-decoration: none;
background-color: #f2f2f2;
}
#site-nav .navbar-inverse .navbar-nav > li > a:hover {
background-color: #4b4b4b;
background: none;
text-decoration: none;
}
#site-nav .navbar-inverse .navbar-collapse,
#site-nav .navbar-inverse .navbar-form {
border: 0px;
}
#site-nav .company-logo {
padding-bottom: 25px;
}
}
/* ==========================================================================
CUSTOM
========================================================================== */
#site-nav,
#footer {
background-color: #022169;
}
#site-nav .company-logo {
margin-bottom: 10px;
margin-top: 10px;
width: 25%;
}
#site-nav .nav.navbar-nav {
margin-top: 12px;
}
#site-nav .navbar-inverse .navbar-nav > li > a {
color: #fff;
font-weight: lighter;
}
#site-nav .navbar-inverse .navbar-nav > li > a:hover {
color: #022169;
}
#site-nav .navbar-inverse .navbar-nav > li.link > a:hover,
#site-nav .navbar-inverse .navbar-nav > li.link > a:focus,
#site-nav .navbar-inverse .navbar-nav > .open > a,
#site-nav .navbar-inverse .navbar-nav > .open > a:hover,
#site-nav .navbar-inverse .navbar-nav > .open > a:focus {
background-color: #022169;
color: #fff;
}
#site-nav .company-logo img {
width: 100%;
}
#site-nav .fa.fa-circle.fa-stack-2x {
color: #fff;
}
#site-nav .insta a {
padding-right: 5px !important;
}
#site-nav .linkedin a {
padding-left: 5px !important;
padding-right: 0px !important;
}
#site-nav .fa-inverse {
color: #022169;
}
#site-nav .navbar-inverse .navbar-nav > li > a:hover {
color: #fff;
}
#site-nav .nav.navbar-nav li a {
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
}
#site-nav .dropdown-menu.navmenu-nav li a:hover {
border-width: 0;
}
#site-nav .navbar-inverse .navbar-toggle .icon-bar {
background-color: #fff;
}
#media Screen and (max-width: 991px) {
#site-nav .company-logo {
width: 100%;
margin: 0 auto;
text-align: center;
margin-top: 17px;
}
#site-nav .company-logo img {
width: 50%;
}
}
#media Screen and (max-width: 768px) {
#site-nav .company-logo img {
width: 265px;
}
#site-nav .company-logo {
width: 80%;
text-align: left;
}
}
#site-nav .navbar-toggle {
border: none;
background: transparent !important;
}
#site-nav .navbar-toggle .icon-bar {
width: 22px;
transition: all 0.2s;
}
#site-nav .navbar-toggle .top-bar {
transform: rotate(45deg);
transform-origin: 10% 10%;
}
#site-nav .navbar-toggle .middle-bar {
opacity: 0;
}
#site-nav .navbar-toggle .bottom-bar {
transform: rotate(-45deg);
transform-origin: 10% 90%;
}
#site-nav .navbar-toggle.collapsed .top-bar {
transform: rotate(0);
}
#site-nav .navbar-toggle.collapsed .middle-bar {
opacity: 1;
}
#site-nav .navbar-toggle.collapsed .bottom-bar {
transform: rotate(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<section id="site-nav">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="company-logo">
<a href="">
<img src="http://hanlon.koru.firebrand.co.nz/themes/startertoplight/img/logo-reverse.png" alt="your logo here">
</a>
</div>
<!--/.logo -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fullwidth" id="navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="link"><a href=/new-content-page/>Our Team</a>
</li>
<li class="link"><a href=/new-content-page-2/>Our Services</a>
</li>
<li class="link"><a href=/our-projects/>Our Projects</a>
</li>
<li class="link"><a href=/working-for-us/>Working For Us</a>
</li>
<li class="link"><a href=/contact/>Contact</a>
</li>
<li class="insta"><a href=http://www.instagram.com><span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-instagram fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="linkedin"><a href=http://linkedin.com><span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
</div>
<!-- /.navbar-collapse -->
</nav>
<!-- /.col -->
</div>
<!-- /.container -->
</section>
I have inspected the menu elements on your website. Don't worry it is very easy to solve this problem. The problem is that you omit to add collapsed class to the button.navbar-toggle element. This way will solve your problem perfectly. Hope that helps.
I changed bootstrap's navbar collapse at 992px breakpoint but it still show me dropdown menu
http://imgur.com/WR4LS2o,qHvd6RH#0
using this standard css code
#media (max-width: 991px) {
header nav.navbar-main.clearfix {
background-color: transparent;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
background-color: white;
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}
How can i do?
(I'm sorry for the external link but i dont have enought reputation to link an image)
The first method is to generate a custom bootstrap in overiding the
breakpoints.
( I think it's the best way because it does the whole job alone )
The second method is too add this css lines to your given code :
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu .dropdown-header, .navbar-nav .open .dropdown-menu>li>a {
padding: 5px 15px 5px 25px;
}
.navbar-nav .open .dropdown-menu>li>a {
line-height: 20px;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #777;
}
You can find a fiddle with a default navbar here
Solved in this way
#media (max-width: 991px) {
.navbar-main .navbar-nav li ul {
display: block;
position: inherit;
left: auto;
top: auto;
width: 100%;
background: transparent;
padding: 0 0 0 10px;
z-index: 1;
box-shadow: none;
}
.navbar-collapse.collapse.in {
overflow-y: auto;
}
}
I need a drop down menu that will be kept open after I click. Now when I click to open the submenu, it closes and I need to again open it all the way. But if it were kept open, then it would be easier. Try the site with mobile and then you will understand.
site link is:
www.banglardamal.org/test2
CSS is:
/* ======= Nav =======*/
.navbar-default {
border-color: transparent;
background-color: white;
}
.navbar-default .navbar-brand {
font-family: "Kaushan Script","Helvetica Neue",Helvetica,Arial,cursive;
color: black;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active,
.navbar-default .navbar-brand.active {
color:darkgray;
}
.navbar-default .navbar-collapse {
border-color: rgba(255,255,255,.02);
}
.navbar-default .navbar-toggle {
border-color: white;
background-color: white;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #222;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: lightgrey;
}
.navbar-default .nav li a {
text-transform: uppercase;
font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 400;
letter-spacing: 1px;
color: #222;
}
.navbar-default .nav li a:hover,
.navbar-default .nav li a:focus {
outline: 0;
color: darkgray;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 0;
color: #fff;
background-color: darkgray;
}
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
color: #fff;
background-color: darkgray;
}
#media(min-width:768px) {
.navbar-default {
padding: 25px 0;
border: 0;
background-color: transparent;
-webkit-transition: padding .3s;
-moz-transition: padding .3s;
transition: padding .3s;
}
.navbar-default .navbar-brand {
font-size: 2em;
-webkit-transition: all .3s;
-moz-transition: all .3s;
transition: all .3s;
}
.navbar-default .navbar-nav>.active>a {
border-radius: 3px;
}
.navbar-default.navbar-shrink { <!--For floating navbar that changes colour while scrooling-->
padding: 10px 0;
background-color:white;
}
.navbar-default.navbar-shrink .navbar-brand {
font-size: 1.5em;
}
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}