I want to change the background color of my navbar to make it transparent on my home page but leave it black on the rest of the pages but I have no idea where to start. All of my css is in one file. None of the pages have a header section. My header.php code follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
<title>Foxclone backup and cloning utility</title>
<meta name="description" content= "FoxClone is a Linux based image backup, restore and clone tool using a simple point and click interface." />
<meta name="robots" content= "index, follow">
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="navbar-links">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="features.php">Features</a></li>
<li><a href="legal.php">Legal</a></li>
<li><a href="contact.php">Contact</a></li>
<li><a href="download.php">Downloads</a></li>
</ul>
</div>
</nav>
The navbar.css follows:
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
box-sizing: border-box;
z-index: 1030;
}
.navbar {
position:fixed;
width: 100%;
display: flex;
background: black;
height: 30px;
justify-content: flex-end;
flex: 0 1 60vw;
}
.brand-title {
font-size: 1.5rem;
margin: .25rem;
}
.navbar-links {
height: 100%;
}
.navbar-links ul {
display: flex;
margin: 0;
padding: 0;
}
.navbar-links li {
list-style: none;
}
.navbar-links li a {
font-weight:bold;
display: block;
background: transparent;
color: #FFEB3B;
text-align: center;
padding: .2rem 1rem 0 1rem;
text-decoration: none;
}
.navbar-links li:hover {
background-color: blue;
}
.toggle-button {
position: absolute;
top: .75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
EDIT:
Could I use the following in header.php to modify the background of the navbar?
if(basename($_SERVER['REQUEST_URI']) == 'index' {
.navbar
background: transparent;
}
Thanks in advance.