Unable to add in the text colour of my menu navbar - html

Question

This should be a fairly simple thing, however no matter where I add in color: black; the menu items do not show, you can only see them when I click and highlight over them. Please could someone point out which class needs to color tag to alter the text colour to black? I have tried placing it in .topnav with color: black; but did not change anything?
Also I can't get the active class to change when I'm on a different page, seems to only stay on the Home page?
.topnav {
background-color:white;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: grey;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the 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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
THE MENU CODE:
<!-- NAV BAR homepage-->
<nav>
<!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
<div class="topnav" id="myTopnav">
<i class="fas fa-home"> Home</i>
<i class="fas fa-info-circle"> About</i>
<i class="fas fa-envelope"> Contact</i>
<?php
// The below is a small 'if else' statement which depending on whether a user is logged in or not, the menu items will differ
// If logged in, then show the logout and the dashboard item
// If not logged in, then show the login and signup button
if (!isset($_SESSION['studentID'])) {
echo "<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'> Login</i></a>";
echo "<a href='signup.php'><i class='fas fa-check-square'> Sign Up</i></a>";
} else if (isset($_SESSION['studentID'])) {
echo "<a href ='dashboard.php'><i class='fas fa-tachometer-alt'> Dashboard</i></a> ";
echo "<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'> Logout</i></a>";
}
?>
☰
</div>
</nav>
I have right clicked into the console to check the styles tab:
This is what I see on my screen without hovering over an item in the menu:
Then this is what I see when I hover over an item (About):

Answer 1

Just add color: black to yours .topnav a components and get out the text from the fontawesome tag. For example replace that:
<i class="fas fa-envelope"> Contact</i>
to that:
<i class="fas fa-envelope"></i> Contact
You will get something like that:
.topnav {
background-color: white;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Add an active class to highlight the current page */
.active {
background-color: grey;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
float: left;
overflow: hidden;
}
/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
/* Style the 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;
}
/* Style the links inside the dropdown */
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover,
.dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
display: block;
}
<!-- NAV BAR homepage-->
<nav>
<!-- https://www.w3schools.com/howto/howto_js_topnav_responsive.asp -->
<div class="topnav" id="myTopnav">
<i class="fas fa-home"></i> Home
<i class="fas fa-info-circle"></i> About
<i class="fas fa-envelope"></i> Contact
<a name='login-submit' href='login.php'><i class='fas fa-sign-in-alt'></i> Login</a>;
<a href='signup.php'><i class='fas fa-check-square'></i> Sign Up</a>;
<a href='dashboard.php'><i class='fas fa-tachometer-alt'></i> Dashboard</a>;
<a name='logout-submit' href='scripts/logout-script.php'><i class='fas fa-sign-out-alt'></i> Logout</a>;
☰
</div>
</nav>

Answer 2

For a first pitch, I would say that the color of your text is the same as the background of the navbar/body so you could try adding a background-color: color to your navbar.
.topnav a {
background-color: lightgray; //background-color
float: left;
display: block;
color: black; //change color of the text
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
If you decide to not add a background-color you can consider changing the color of the text to any other with color: [color].

Answer 3

a good way to assure if the color is not being overwritten you can put "!important" after the color like the following code below
.top-nav {
color:black !important;
}

Answer 4

in above code if you want to add background full navbar then added
.topnav{
background-color:hotpink;
overflow:hidden;
}
image look like below
if you want to added background only item then added below style code into
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
background: red;// background will be red all menu item
}
image like below