Я не могу получить стиль цвета, чтобы работать над встроенным значком в HTML. Это меню меню в стиле гамбургера для отзыв ⇐ CSS

[Anonymous]

Я представляю адаптивную навигацию на свой сайт, поэтому меню превращается в меню в стиле гамбургера, которое появляется только тогда, когда размер экрана меньше шириной 600 пикселей. Функция, кажется, работает, но я не могу заставить значок изменить цвет. В настоящее время он черный, и он сидит на черном фоне, так что вы не можете увидеть его, когда условия выполняются. Возможно, я не использую правильную целевую нацеливание в своем коде?

Код: Выделить всё

/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "navbar") {
x.className += " responsive";
} else {
x.className = "navbar";
};
}< /code>
.navbar {

margin: 30px;
padding-left: 20px;
overflow: hidden;
background-color: #333;
border-radius: 25px;
}

a {
float: left;
display: block;
font-family: 'Anybody';
font-size: 1.5rem;
font-weight: 100;
color: beige;
text-align: center;
padding: 8px 20px;
margin: 5px 20px 5px 30px;
text-decoration: none;
}

a:hover {
background-color: #111;
}

a.active {
background-color: rgb(82, 90, 90);
color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.navbar .icon {
display: none;

}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one. Show the link that contains
should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.navbar a:not(:first-child) {
display: none;
}

/* this line hides the menu items except for the first one (first child) */
.navbar a.icon {
float: right;
display: block;
color: white;
border: solid white 1px;
}
}

/* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar
look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
.navbar.responsive {
position: relative;
}

.navbar.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}

.navbar.responsive a {
float: none;
display: block;
text-align: left;
}
}< /code>


[url=./Home.html]Developer  |  Steven Llewellyn[/url]
[url=./Projects.html]Projects[/url]
[url=./Skills.html]Skills[/url]
[url=./Contact.html]Contact[/url]
[url=javascript:void(0);][i][/i]
[/url]

< /code>
< /div>
< /div>
< /p>
Я попытался взять элемент значка
[i][/i] < /code>
из бара Nav и попытка стилизовать его самостоятельно. Когда я стиляю это так работает: < /p>

[i][/i] 
[i][/i]
[i][/i]

[i][/i]

Я пробовал этот встроенный стиль в Navbar, но он не имеет эффекта.


Подробнее здесь: https://stackoverflow.com/questions/795 ... s-a-hambur