HTML Navigation bar multiple background color for each section title

HTML code:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="hidden">
      <a href="#page-top"></a>
    </li>
    <li> 
      <a class="page-scroll" href="#services">Services</a>
    </li>
    <li>
      <a class="page-scroll" href="#portfolio">Portfolio</a>
    </li>
    <li>
      <a class="page-scroll" href="#about">About</a>
    </li>
    <li>
      <a class="page-scroll" href="#team">Team</a>
    </li>
    <li>
      <a class="page-scroll" href="#contact">Contact</a>
    </li>
   </ul>
 </div>

CSS code:

.navbar-custom .navbar-nav>.active>a {
  color:#fff;
  background-color:#fed136
}

Hello, I have this navigation bar, when you scroll down to each section of the website, the name of the section from the tob bar (the active one) will take a background color (#fed136). I am trying to do something but it didn’t work: when scrolling down, I want each section to have a specific color, so I don’t want that one background color to be as default. I tried to add and “id” to each section, it didn’t work.

This is an example of what I am trying to do : http://www.rad-road.com/Capture.PNG http://www.rad-road.com/Capture2.PNG
Any help?

Is this part working already and you just need the different colours?

Hi there fadikhuri,

and a warm welcome to these forums. :winky:

Does this help…

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
    background-color: #000;
    font: 1em/1.62em verdana, arial, helvetica, sans-serif;
 }
ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
 }
ul li {
    display: inline-block;
    margin:0 0.25em;
 }
ul a {
    display: block;
    padding: 0.75em 1em;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
 }
ul li:nth-child(1) a:focus {
    background-color: #fed136;
    color: #000;
 }
ul li:nth-child(2) a:focus {
    background-color: #136fed;
    color: #fff;
 }
ul li:nth-child(3) a:focus  {
    background-color: #13fed6;
    color: #033;
 }
ul li:nth-child(4) a:focus  {
    background-color: #fe136d;
    color: #fff;
 }
ul li:nth-child(5) a:focus  {
    background-color: #f136ed;
    color: #101;
 }
/************** for testing ********************/
#top {
    display: block;
    margin-top: 50em;
    color: #fff;
 }
/***********************************************/
</style>
</head>
<body> 
 <span id="page-top"></span>
 <ul>
  <li><a href="#services">Services</a></li>
  <li><a href="#portfolio">Portfolio</a></li>
  <li><a href="#about">About</a></li>
  <li><a href="#team">Team</a></li>
  <li><a href="#contact">Contact</a></li>
 </ul>
<!--************ for testing ************-->
 <a id="top" href="#page-top">page top</a>
<!--*************************************-->
</body>
</html>

coothead

Yes this parts works already, I need different colors, as you can see in the attached screenshots.

fadikhuri,

Copy coothead’s code to a file and open that file in your browser and see if it looks and acts the way you want?

I presume there is some javascript that applies the .active class during scroll.
So you could add the different colours using nth-child() as @coothead suggests. Though the selectors may be more like the one you posted, with the addition of nth-child

1 Like

Thank you for your reply coothead,
I checked your code, it works only while clicking on the title section from the menu, but I need that the color changes while scrolling down.

You might need to post another picture showing what you mean by “while scrolling down”.

I have a tob menu bar (navigation bar), the website is one page website, each title in the navbar represents a section, the sections exist in the same page, when you scroll down you are in the “services” section, so the background color of the title “service” (from the navbar) become red per example, you scroll down you see the “portfolio” section, so the bg color of the title “portfolio” become blue…

1 Like

I will try this…

There is .scrollTop method in jquery, which gives you current position of a scroll
code example:

 if ($(document).scrollTop() > 50) {
      $("p").addClass("test");
    }

Did you mean I add this to coothead code ?

This is not a full working example. It does not have the js scroll functionality, but an example of how the css selectors may work with nth-child()
Note: I manually added the .active class to just one list element in the absence of the js.
I also added the class .navbar-custom to the containing div to match your selector.


Feel free to fork and add the js anyone.

1 Like

Great. I think it works now. Thank you SamA74.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.