Radhika Kulkarni Radhika Kulkarni - 2 months ago 14
HTML Question

change default color of navigation bar

I have written following code. However, i am not getting how to change default blue color of navigation bar. I want the color to be #1E90FF

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.row.content {height: 1500px}
.sidenav {
background-color: #f1f1f1;

height: 100%;
}

@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height: auto;}
}

header {background: #1E90FF;color:white;padding: 35px;}
footer {background: #1E90FF;color:white;padding: 15px;}

}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>List Of Forms</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="fetchAmounts()">
<script src="prefilledform.js"> </script>
<br>



<center>
<div class="container-fluid">
<header>
<h1>Employee Reimbursement Forms</h1>
</header>
<div class="row content">
<div class="col-sm-3 sidenav">
<h4>Forms</h4>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#section1">Home</a></li>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
<br>
<br>
</div>
<div class="col-sm-9">


<h2>Account History </h2>

<div>
<footer>Logged in as: <%out.println(request.getAttribute("name")); %></footer>
</div>
</div>
</center>
</body>
</html>


I am using bootstrap 3. I also want to add effects like hover when i will click on active tab

Answer

including this on the page <style></style> tags serves for the per page basis well

and mixing it on two shades gives a brilliant effect like:

<style>
    .nav-pills > li.active > a, .nav-pills > li.active > a:focus {
        color: black;
        background-color: #1E90FF;
    }

        .nav-pills > li.active > a:hover {
            background-color: #efcb00;
            color:black;
        }
</style>