bootstrap active class background color - html

I have this HTML for navbar and I need to change the background color for the .active class.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" id="white" href="#">TableMailerMM</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>-->
</div>
</div>
</nav>
What I have tried is,
.nav.navbar-nav li:active{
background-color: #ff812c;
}
but it doesn't work, any ideas?


Try using
.nav.navbar-nav li.active a{
background-color: red;
}
.nav.navbar-nav li.active a {
background-color: #ff812c;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" id="white" href="#">TableMailerMM</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>


You're using :active pseudeselector which doesn't apply here use .active class selector and select descendant anchor like :
ul.nav.navbar-nav li.active a {
//styles
}


https://jsfiddle.net/94yqf9sa/4/
:active is about state of element.
.active is about class of element.

Related

how to remove border in the top navbar-inverse navbar-collapse

How can I remove this border in the top when I open the collapse menu on boostrap? I tried used this :
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border:0 !important;
}
but the border still there, someone know how can I remove it? thanks
jsfiddle:
http://jsfiddle.net/x2pL74aw/3/
html:
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</ul>
</div>
</div>
</nav>
css:
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
border:0 !important;
}

Remove box-shadow & border-color from .navbar-collapse. Like:
.navbar-collapse {
box-shadow: none;
border-color: none;
}
Have a look at the snippet below:
.navbar-collapse {
box-shadow: none !important;
border: none !important;
}
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<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>
<a class="navbar-brand" href="#">WebSiteName</a>
</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>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
Hope this helps!

Also set box-shadow to none
border: 0 !important;
box-shadow: none;

How do I change the nav ul li color?

I have a navbar in my Page like this:
<nav role="navigation" class="nav navbar-default">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
</ul>
</div>
</nav>
When I apply this CSS:
.collapse ul li {
color: #ffffff;
}
Isn't the li supposed to change color?
It's still the usual color. Why is this?

You just need to tweak your selectors
.collapse ul.navbar-nav>li>a {
color: red;
}
.collapse ul.navbar-nav>li {
background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav role="navigation" class="nav navbar-default">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
</ul>
</div>
</nav>

There is predefined background image property in bootstrap theme css
background-image: linear-gradient(to bottom,#fff 0,#f8f8f8 100%)
This is preventing your background-color to apply.
So, Add background-image:none; to .navbar.navbar-default.

try to a tag change color to
.collapse ul li a {
color: #ffffff;
}

Just for changing the color. If you want some other changes you can style it.
.collapse ul li a {
color: red;
}
<nav role="navigation" class="nav navbar-default">
<div class="navbar-header">
<button data-toggle="collapse" data-target=".navbar-collapse" type="button" class="navbar-toggle">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href=#>Log In</a></li>
<li><a href=#>Sign Up</a></li>
</ul>
</div>
</nav>

Vertically centering Font Awesome icon inside nav

I'm trying to make the icon vertically centered so it would align with the rest of the nav links but I can't seem to get it to work no matter what I try.
HTML
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="img/logo.png" class="navbar-brand" href="index.html">
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-left">
<li><span class="fa fa-phone"> +62 202 555 0117</span></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
CSS
nav.navbar {
padding: 12px;
}
span.fa.fa-phone {
color: #fff;
vertical-align: middle;
}

Navbar's links have padding: 15px property. So you need to apply this property to the phone number.
Make special class for this purpose. Use
<li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>
instead of <li><span class="fa fa-phone"> +62 202 555 0117</span></li>.
Use <a class="navbar-brand" href="index.html"><img src="img/logo.png" alt=""></a>
instead of <img src="img/logo.png" class="navbar-brand" href="index.html">
The toggle-button has to use the id from <div class="collapse navbar-collapse" id="nav"> as the value of the data-target property.
Please chaeck the result. Is it what you want to achieve?
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
.navbar {
padding: 12px;
}
.nav .phone {
color: #fff;
padding: 15px;
}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false">
<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" href="index.html"><img src="img/logo.png" alt=""></a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav navbar-left">
<li class="phone"><span class="fa fa-phone"></span> +62 202 555 0117</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

How to remove background color in hover and change it to underline but with space between text and line in Bootstrap?

Thank you for reading and answering my question. What I would like to do is have my links underlined once it is hovered. Without background color and with space between text. Sort of something like this using bootstrap. enter image description here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internship Exercise 1</title>
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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" href="#"><img src="img/logo.jpg" alt="logo" width="90%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
With CSS here that have a temporary underline for active. How can I do this for hover? Looking forward to your answer. Thanks!
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.underline {
border-bottom: solid 1px #ffffff;
display: inline;
padding-bottom: 2px;
}

Well that's why :hover exists :)
HTML:
<body><!--Navbar start-->
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" alt="logo" height="100%"></a>
</div>
<div class="collapse navbar-collapse navmargin" id="navbarCollapse">
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Pricing</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
CSS:
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar{
background:pink!important;
padding:10px;
}
.navbar li *:hover{
color:red!important;
}
.navbar li:hover{
border-bottom:3px solid white;
}
Here is a working fiddle: https://jsfiddle.net/dp17vjus/

Bootstrap navbar with collapsed menu icon - How to?

On this bootstrap starter template:
when the browser gets narrow the navigation bar links/buttons collapse into one icon in top-right corner like this:
I would like to have this collapsed "icon" as default like on the picture above. So that the navbar links are available after the user clicks that top-right collapsed button.
How to do that?
This is the source code of the template:
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<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" href="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="starter-template">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div><!-- /.container -->

It's all in the CSS.
See this post and check out the css column.
Always Collapse Bootstrap Nav
Working Example:
.navbar .navbar-header {
float: none;
}
.navbar .navbar-toggle {
display: block;
}
.navbar .navbar-collapse.collapse {
display: none!important;
}
.navbar .navbar-nav {
float: none!important;
}
.navbar .navbar-nav > li {
float: none;
}
.navbar .navbar-collapse.collapse.in {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-static-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="navbar-collapse collapse" id="navbar">
<ul class="nav navbar-nav">
<li class="active">Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</div>
</nav>