avega avega - 1 month ago 10
CSS Question

How to change highlighting color on a navbar as one scrolls down a single webpage to different sections

I'm trying to build a practice portfolio/resume webpage that contains different sections (Home, resume, contact, etc.). My fixed navbar already highlights which part of the webpage you're on, but I would like to change the highlight color. I've tried so many different solutions to fix this but for some reason none of them have worked.

My code currently:

<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<meta charset="utf-8">
<meta name="description" content="A portfolio of my work.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/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>
<style>
body {
position: relative;
}

nav{
background-color: black;
color: red;
}

ul{
height: 70px;
}

li>a{
text-align: center;
height: 71px;
width: 150px;
color: white;
font-family: bookman;
font-size: 20px;
}

}

.navbar-inverse {
background-color: black !important;
}

.nav > li > a:hover,

.nav > li > a:focus {
background: #B22222;
color: white;
}

#home {padding-top:80px;height:675px;color: #fff; background-color: #00bcd4;}
#about {padding-top:80px;height:675px;color: #fff; background-color: #673ab7;}
#portfolio {padding-top:80px;height:675px;color: #fff; background-color: #ff9800;}
#resume {padding-top:80px;height:675px;color: #fff; background-color: #00bcd4;}
#contact {padding-top:80px;height:675px;color: #fff; background-color: #00bcd4;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<p class="navbar-text" style="color: white; padding-top: 7px; font-family: Oswald; font-size: 22px;">Name</p>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home" class="active">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#resume">Resume</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>

<div id="home" class="container-fluid">
</div>
</div>
<div id="about" class="container-fluid">
<h1>Section 2</h1>
<p><a href="#">My resume can be found here</a></p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="portfolio" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="resume" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="contact" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>

</body>
</html>

Answer Source

Add this CSS at the end of your style tag. Change colour red to the color you want.

.navbar-inverse .navbar-nav>.active>a,
.navbar-inverse .navbar-nav>.active>a:focus,
.navbar-inverse .navbar-nav>.active>a:hover {
    background-color: red;
}