Это должно быть довольно просто, однако, куда бы я ни добавил color: black;, пункты меню не отображаются, вы можете увидеть их, только когда я нажму и выделю их. Кто-нибудь может указать, какой класс должен пометить color, чтобы изменить цвет текста на черный? Я попытался поместить его в .topnav с color: black;, но ничего не изменилось?
Также я не могу изменить активный класс, когда я на другой странице, кажется, только остаться на Домашняя страница?
.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">
<a href="index.php" class="active"><i class="fas fa-home"> Home</i></a>
<a href="about.php"><i class="fas fa-info-circle"> About</i></a>
<a href="contact.php"><i class="fas fa-envelope"> Contact</i></a>
<?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>";
}
?>
<a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="menu2Function()">☰</a>
</div>
</nav>
Я щелкнул правой кнопкой мыши в консоли, чтобы проверить вкладку стилей: 
Это то, что я вижу на своем экране, не наводя курсор на элемент в меню: 
Тогда это то, что я вижу, когда я наведите курсор на элемент (О программе): 