Hee Sun Park Hee Sun Park - 1 year ago 110
HTML Question

Bootstrap active menu bar color

I am currently making a website using bootstrap. I have a menu bar on top, and I would like to change the color or background color of the specific menu bar when the section of the website is in. Like example, one of menu is call about, and there is a section in homepage call about. When the person is on the about section of the webpage, I want menu "about" will change into different color background.

I used data-spy(scroll) and data-target(my-navbar) to check if it's work, but it was not working. Is there anyway I can fix this problem?

P.S. This is my navbar part and body part that I use it. Thanks!

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">
<title>Provision Health & Wellness</title>
<meta name="description" content="ProvisionHW">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

body {
padding-top: 40;

h2 {
text-align: center;


<body data-spy="scroll" data-target="#my-navbar">

<!-- Navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

<a href="" class="navbar-brand">Provision Health&Wellness</a>
</div> <!-- Navbar Header-->

<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#health_product">Health Product</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#slim_product">Slim Product</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#skin_product">Skin Product</a></li>
<li><a href="#contact_us">Contact us</a></li>
</div> <!-- End Container-->
</nav> <!-- End navbar-->

Answer Source

Here is fiddle that's working.


Here is jQuery that tracks active section

$(function() {
$('a.page-scroll').bind('click', function(e) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top
    , 1500, 'easeInOutExpo' //add/remove for smooth scroll

Don't forget to include jQuery easing.

Add id of page-top to your body element and href page-top to your logo so you can scroll to top on click.

Add class page-scroll on all a elements that you want to lead to section.

Wrap all sections in section tag.

And now you can style active link with css

.navbar-inverse .navbar-nav>.active>a, .navbar-inverse .navbar-nav>.active>a:focus, .navbar-inverse .navbar-nav>.active>a:hover{