Multi-Coloured Dropdown Nav Bar

Yinnav · August 31, 2020

This Dropdown Nav Bar code is pasted directly from a W3schools tutorial.

It is for a horizontal nav bar with drop down menu.

Do you know if it's possible to change the colours behind each individual button title?

So at the moment the nav bar is black. Instead of it being all black like that, is it possible to have one colour for the Home button, a different colour for the News button, and different colours again for each individual drop down Link button?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
  font-family: Arial, Helvetica, sans-serif;
}

.navbar {
  overflow: hidden;
  background-color: #333;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div> 
</div>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

dsonesuk · August 31, 2020

Give each a class name and style using that class name to the colour you want.

Yinnav · September 1, 2020

Thank you very much for your reply.

I've had a go, as I'm still very much learning so I always try to work things out for myself. I made a good job of making half the nav bar disappear but didn't succeed in getting multi colours! 😆

Would you be able to give me an example of where the class names should go within that code? I should be good to go then.

Thanks again! 😊

dsonesuk · September 1, 2020

<div class="navbar">
  <a href="#home" class="bkcolor1">Home</a>
  <a href="#news" class="bkcolor2">News</a>
  <div class="dropdown">
    <button class="dropbtn bkcolor3">Dropdown 
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#" class="bkcolor4">Link 1</a>
      <a href="#" class="bkcolor5">Link 2</a>
      <a href="#" class="bkcolor6">Link 3</a>
    </div>
  </div> 
</div>

 .bkcolor1{background: "red";}
 .bkcolor2{background: "orange";}
 .bkcolor3{background: "yellow";}
 .bkcolor4{background: "green";}
 .bkcolor5{background: "blue";}
 .bkcolor6{background: "indigo";}

Yinnav · September 1, 2020

That is fantastic, thank you so much!!

After fiddling about with where to place the css part and getting a squiggly bracket the wrong way round I've now managed to get it working! 😆

Awesome, thank you again! 😎

JMRKER · September 3, 2020

On 9/1/2020 at 7:25 AM, dsonesuk said:

Works a lot better without the "quotes" around the background colors.

.bkcolor1{background: red;}
.bkcolor2{background: orange;}
.bkcolor3{background: yellow;}
.bkcolor4{background: green;}
.bkcolor5{background: blue;}
.bkcolor6{background: indigo;}

Sign In

Multi-Coloured Dropdown Nav Bar

Recommended Posts

Yinnav

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Yinnav

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Yinnav

Link to comment

Share on other sites

JMRKER

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity