Radhika Kulkarni Radhika Kulkarni - 7 months ago 46
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">
.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;}

<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>
<body onload="fetchAmounts()">
<script src="prefilledform.js"> </script>

<div class="container-fluid">
<h1>Employee Reimbursement Forms</h1>
<div class="row content">
<div class="col-sm-3 sidenav">
<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>
<div class="col-sm-9">

<h2>Account History </h2>

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

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


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:

    .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;