Jump to content

Multi-Coloured Dropdown Nav Bar


Yinnav
 Share

Recommended Posts

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>

 

Link to comment
Share on other sites

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! 😊

Link to comment
Share on other sites

<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";}

 

  • Thanks 1
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...