I am having trouble trying to change the color of a hamburger icon.
I cannot find which bit of code changes it. I want it to be white, but it shows as dark on small screens. Strangely, when I use the developer tool in Google Chrome on my PC and reduce the screen to trigger the hamburger menu, it is displayed in white, but not on actual small screens.
My code is:
<!DOCTYPE html>
<html lang="en">
<head>
<?php include("includes/analytics.php");?>
<meta charset="utf-8">
<title>Test Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body{
margin: 0px;
background-color: #759a79;
font-family: arial;
font-size: 12pt;
}
.topnav {
width: 100%;
max-width: 1200px;
background-color: #3c7743;
position: fixed;
z-index: 20;
top: 0;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #12671b;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.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;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #666;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media only screen and (min-width: 610px) {
.content2 {
display: block;
margin: 0 auto;
text-align: left;
width: 30%;
background-color: #ffffff;
padding: 10px;
}
}
@media only screen and (max-width: 610px) {
.content2 {
display: block;
margin: 0 auto;
text-align: left;
width: 90%;
background-color: #ffffff;
padding: 10px;
}
}
@media screen and (max-width: 820px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 820px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
</style>
</head>
<body>
<div class="topnav" id="myTopnav">
<?php
if($page=="1"){
echo ' <a href="index.php" class="active">Home</a>';
}
else{
echo ' <a href="index.php">Home</a>';
}
if($page=="2"){
echo ' <a href="dog-kennels.php" class="active">Dogs</a>';
}
else{
echo ' <a href="dog-kennels.php">Dogs</a>';
}
if($page=="3"){
echo ' <a href="cattery.php" class="active">Cats</a>';
}
else{
echo ' <a href="cattery.php">Cats</a>';
}
if($page=="4"){
echo ' <a href="dog-grooming.php" class="active">Dog Grooming</a>';
}
else{
echo ' <a href="dog-grooming.php">Dog Grooming</a>';
}
if($page=="5"){
echo ' <a href="find-drumbro-kennels.php" class="active">Location</a>';
}
else{
echo ' <a href="find-drumbro-kennels.php">Location</a>';
}echo ' <a href="tel:+441465460960">Telephone: 01465 460960</a>';
?>
<a href="javascript:void(0);" style="font-size:15px; color: #ffffff;" class="icon" onclick="myFunction()">☰</a>
</div>
<!-- the script below must be kept for nav bar -->
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
</body>
</html>
I am demented with this. I have tried adding
color: #FFFFFF;
to many parts of the navigation CSS code but it doesn't make any difference.
I have also tried adding
background-color: #FFFFFF;
to the various parts of the icon CSS but all that does is change the background area of the icon to white, which is not what I want
I also tried adding:
.icon{
color:#FFFFFF !important;
}
and
.icon{
background-color:#FFFFFF !important;
}
and:
.icon .icon,
.icon .icon-inner::before,
.icon .icon-inner::after {
background-color: white;
}
but they don't work either.
I have searched on this site and all over with Google but cannot find a solution. I am sure there will be a previous question and answer about this but I cannot find it, so I apologise in advance if this is a duplicate.
Many thanks if anyone can help.
Tog Edited Update:
New simplified code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
body{
margin: 0px;
background-color: #759a79;
font-family: arial;
font-size: 12pt;
}
.icon {
color: #fff;
}
</style>
</head>
<body>
<a href="javascript:void(0);" style="font-size:15px; color: #ffffff; text-decoration: none;" class="icon" onclick="myFunction()">☰</a>
</body>
</html>
This displays white on my PC but black on my Samsung A5 Tablet and Samsung S9 phone
A quick google search reveals that this seems to be a known bug: https://blog.futtta.be/2014/06/05/android-chrome-bug-when-styling-unicode-character/
This is from 2014... but maybe its still not fixed? Or your device needs updating?
Try using SVG or Icon Frameworks like https://fontawesome.com