CSS notification bell background

[Berk]

Hey devbest fkerz

I'm doing something and I want to change this bell's background color to black (or transparent w.e.) but whenever I change code, it doesn't appears or it doesn't open the dropdown. btw im using the code from w3schools dropdowns

Spoiler: Code

/* Dropdown Button */
.dropbtn {
    background-color:#f9f9f9;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
 
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #1c051c
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.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;
}

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

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
li{list-style-type: none;padding: 0;margin: 0;}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

/* The container <sdiv> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 260px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a, p {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}</

Tried to change each background-color and it didn't work.

 

[NeedForSpreed]

If you're using chrome right-click and press inspect element. Then to the right you can find the css associated with the id or class. Try finding the class name that contains the background color. You should eventually figure it out yourself

 

[Berk]

If you're using chrome right-click and press inspect element. Then to the right you can find the css associated with the id or class. Try finding the class name that contains the background color. You should eventually figure it out yourself

Hey, thanks for answer. element class is dropbtn. I've set background-color: black; but it didn't work anyhow.

 

[NeedForSpreed]

Hey, thanks for answer. element class is dropbtn. I've set background-color: black; but it didn't work anyhow.

Change it in the inspect element and see if it changes there. If not then it's the wrong class. If it does change then clean cache

Skickat från min FRD-L09 via Tapatalk

 

[Berk]

Change it in the inspect element and see if it changes there. If not then it's the wrong class. If it does change then clean cache

Skickat från min FRD-L09 via Tapatalk

I can change it by using style="background-color:black;" but why not using my style? style is in header.php btw.