Jump to content
Yinnav

Multi-Coloured Dropdown Nav Bar

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>

 

Share this post


Link to post
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! 😊

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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;}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...