CSS Issue - navbar gradient and button color issue

Question

So the issue I'm having is that I have created my navbar and implemented a gradient color scheme. All good.

I've then added a couple of drop down buttons to the menu which function as required, however I can't work out how to keep the original navbar color scheme on those buttons.

I tried adding the code again, but obviously this creates a new gradient within the button. And if I remove the color then it switches out to the same color as the drop down background.

Here's a snippet of the navbar html:

<div class="dropdown">
  <button class="dropbutton">Gaming</button>
    <div class="dropdown-content">
      <a href="pc.html">PC</a>
      <a href="xbox.html">Xbox</a>
      <a href="playstation.html">PlayStation</a>
      <a href="nintendo.html">Nintendo</a>
    </div>
  </div>

And the navbar CSS:

.navbar {
display: flex;
background-image: linear-gradient(to bottom right, #581CBE, #F00E96);}

.navbar a {
color: #FFFFFF;
padding: 16px 20px;
text-decoration: none;
text-align: center;}

.navbar a:hover: {
background-color: #EA14EA;
color: black;}

And finally, the dropdown CSS:

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

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

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

.dropdown:hover .dropdown-content {display: block;}

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

EDIT: To add further clarification, the correct html is present before the snippet, calling the classes etc. The issue I am having is that I cannot get my dropdown buttons to look the same as the rest of the navbar i.e the gradient set by the .navbar extends over the two buttons as well.
I have set colors in the .dropbutton class as otherwise these default to the light grey colour of the drop down menu.

the outcome I'm looking for is something similar to the navbar featured on polygon where by the buttons seem to adopt the how gradient color scheme until hovered over.

Question not clear for me, there is no `html` for class `navbar` — vishnu, Oct 04 '18 at 10:41

score 0 · Answer 1 · answered Oct 04 '18 at 10:38

I believe below snippet work as intended? But I haven't changed anything. I believe something in your other CSS might conflict with this CSS.

Try add !important after your colors. By this way you tell the browsers to use this above anything else.

More reading on !important can be found here.

.navbar {
display: flex;
background-image: linear-gradient(to bottom right, #581CBE, #F00E96);}

.navbar a {
color: #FFFFFF;
padding: 16px 20px;
text-decoration: none;
text-align: center;}

.navbar a:hover: {
background-color: #EA14EA;
color: black;}

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

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

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

.dropdown:hover .dropdown-content {display: block;}

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

<div class="dropdown">
  <button class="dropbutton">Gaming</button>
    <div class="dropdown-content">
      <a href="pc.html">PC</a>
      <a href="xbox.html">Xbox</a>
      <a href="playstation.html">PlayStation</a>
      <a href="nintendo.html">Nintendo</a>
    </div>
  </div>

score 0 · Accepted Answer · answered Oct 04 '18 at 11:03

0

If I have not mistaken you want to see continue gradient color as the background of navbar in buttons but not in there drop expanded regions.

If yes then try adding following code

.dropbutton{
        color: white !Important;
        background-color: rgba(0,0,0,0) !Important;
    }

answered Oct 04 '18 at 11:03

Chandan Maurya

16
3

This was exactly it! Thank you very much. – Tom Wordley Oct 04 '18 at 11:22

CSS Issue - navbar gradient and button color issue

2 Answers2