1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Change navbar background color on 1 page

         

larry29936

6:32 pm on Aug 3, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



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. My header.php code follows: 

 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
 <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">

 <link rel="stylesheet" type="text/css" media="screen" href="css/foxclone.css"> 
 
 <!-- Favicon -->
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#da532c">
 <meta name="theme-color" content="#ffffff">

</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;
}

Thanks in advance.

NickMNS

6:50 pm on Aug 3, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There are many ways to this. The best ways in my opinion are:

1- Create a style tag in the head of your homepage and redefinethe ".navbar" style 

<style>
.navbar {background: transparent;}
</style>


2- Create new style in your style sheet called .homepage and define the style below where .navbar appears, or better yet define it using .navbar.homepage. Then add .homepage to class attribute in the html in your home page. 

//in style sheet
.navbar.homepage {background: transparent;}

// in html
 <!-- Navbar -->
<nav class="navbar homepage">


Note you could also make .homepage an ID then in style #homepage.navbar and in html <nav id="homepage" class="navbar">

Fotiman

7:07 pm on Aug 3, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Hmm... I would suggest your header.php file is not really structured well. That is, it doesn't contain everything nicely... it's got a closing tag </head> tag, but no opening <head>, and similarly an opening <body> tag with no closing </body>. I assume that means you've got some other wrapper php page around this one, where the <html>, <head>, </body>, and </html> tags are located, along with the content of your individual page.

With that said, if you have the ability to apply a class to your <html> tag isolated to your home page only, then you could do something like this:

<html class="homepage">

And then just add a CSS style: 

.homepage .navbar {
 background: transparent;
}


I would avoid using an ID, though, as that will make the specificity harder to work with if you ever need to adjust it in the future.

larry29936

8:00 pm on Aug 3, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



The navbar code is actually part of the header.php which is used by all of the web pages so can't set a class specific to the index.php. Yes, there is html and php code that is page specific that executes before the header.php is called. Could I set a global variable and use that in the css?

lucy24

8:18 pm on Aug 3, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



If your pages are coded in such a way that a full header is included universally, then you really don’t have much alternative but to set an additional class, like 

nav.seethrough {background-color: transparent;}
defined after nav.navbar
and then in the HTML go to 
<nav class = "navbar seethrough">
so you can still use the rest of the .navbar styling. Otherwise you’d have to say the same things over again in the CSS for two different styles.

But wouldn't it be simpler to set a style for the "nav" element generically if there's only one of it on a typical page?

<tangent>
<meta name="robots" content= "index, follow">
Why expend the 45 bytes per page when that’s the default anyway?
</tangent>

larry29936

9:10 pm on Aug 3, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



@lucy24 - the navbar code is part of the header.php. Here's what index.php looks like: 
<?php 

$php_scripts = '../php/';
require $php_scripts . 'PDO_Connection_Select.php';
require $php_scripts . 'GetUserIpAddr.php';


$ip = GetUserIpAddr();
if (!$pdo = PDOConnect("foxclone_data")) {
 exit;
 }
 
$stmt = $pdo->prepare("INSERT INTO access (address) values (?)");
 $stmt->execute([$ip]) ;  

?>

 <?PHP require_once("header.php"); ?>

 <!-- Header -->
 <header class="header">
  <div class="header-content">
<!-- <div class="p-large"> -->
  <div class="header__top">FoxClone</div>
 </div>
 
       <p class="p-small">FoxClone is a Linux based image backup, restore and
    clone tool using a simple point and click interface. Booted from its' own linux system, it takes
    images of the partitions on your hard disk (HDD) or solid-state
    drive (SSD) and stores them for later restoration. Image files
    can optionally be compressed to save space.</p>
       
  </div>
 </header> <!-- end of header -->

 <?PHP require_once("footer.php"); ?>

larry29936

11:02 pm on Aug 3, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



Could I use the following in header.php to modify the background of the navbar? 

 if(basename($_SERVER['REQUEST_URI']) == 'index' {
 .navbar
  background: transparent;
}

lucy24

11:09 pm on Aug 3, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You could, but it seems a bit clunky. Don't forget braces for CSS:
.navbar {background: transparent;}
... except I suppose they need to be escaped, or put in quotation marks or whatever is appropriate. (Can you now say "background" alone in this context, or does it still have to be "background-color"? Someone will know for sure.)

NickMNS

1:35 am on Aug 4, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



The simplest, is to do this with CSS only, as per my post, Fotiman's post and Lucy's post. This is a styling issue it should be done with CSS.

Side rant: I don't code in PHP, I've used it in only few times and hated it. But what I don't get is how you PHP coders can manage when everything is all mixed up, templating, logic, data, server requests, DB calls, even some js scripts thrown in to keep it interesting, all mixed together in a single file, and then files for each page. How do you folks manage big projects?

Is the if statement going to be part of the stylesheet?

larry29936

1:51 am on Aug 4, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



Got it done by setting text to black and background to transparent.

lucy24

2:13 am on Aug 4, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I got the impression the if statement was part of the php header code that's used by all pages, and then if it's invoked by the specific page "index" (assuming nothing but the front page has this filename, no other directories?) the if part gets thrown into the middle of the CSS.

But if so, wouldn't it also need <style> tags fore and aft, since it's going into an individual document's header, not the external stylesheet?

The above contains rather more occurrences of the word "if" than I really like to see.

<tangent>
I don’t think I have anything where the entire header is php. On one site, the first part of the header is a php include. In fact looking at it makes me a little uneasy because the beginning--including the <html> and <head> lines--is in the include, but the last part of the header--including </head>--is in the individual document. This kind of asymmetry is probably fraught with peril, but so far nothing has exploded. Besides, it's a tiny site with an extremely niche audience, so I’d probably hear personally if something went wrong.

Elsewhere, I mainly use php for navigation headers, included into a 99% html document. Oh, and a handful of books where each chapter is constructed in php. But in those, the constructed pages are all identical except the visible content, so doing it in php saves bother.
</tangen>

lucy24

2:16 am on Aug 4, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Got it done by setting text to black and background to transparent.
Yes, but where and how? Admittedly, this is getting to be less of a CSS discussion and more of a php discussion.

NickMNS

2:36 am on Aug 4, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@Lucy24
I got the impression the if statement was part of the php header code that's used by all pages,

I got the same impression, save for the lack of the <style> tags, which really confused me. The bottom line is, why include this in the code for every page when it only applies to one. One could have added a style attribute to the nav tag of the home page and then been done with it. But again the correct solution is to fix it with CSS.

I guess the better best solution is to find styling that work in all cases so no exception is required (I think that is what the OP @larry29936 is referring to in his last post).

lucy24

4:36 pm on Aug 4, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



It occurred to me later that maybe he threw in the towel and did the
<nav style = "background-color: transparent; color: black">
thing, which is always a last resort, but is definitely page-specific.

Larry? Still with us?

larry29936

1:16 pm on Aug 5, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



@lucy24 - Sorry for the delay in responding, had various appointments yesterday afternoon. Yes, I threw in the towel because the header.php is used for all pages and I couldn't get things working as I wanted. I think what I'm going to do is remove the nav section from header.php so I can customize as needed.

larry29936

3:38 pm on Aug 5, 2020 (gmt 0)

5+ Year Member Top Contributors Of The Month



Here's what I ended up doing:
1. Put the nav code back into index.php with background:transparent;
2. Created a new navbar.php with the nav code from header.php and removed it from there.
3. Added <?PHP require_once("navbar.php"); ?> to each page other than index.php.

This solution works for me although now I'll have to modify the navbar in 2 places if I add pages to the site.

NickMNS

3:44 pm on Aug 5, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@larry29936
I think I get it now. What you are saying is that the header block of code is the same for all pages. In which case your if statement approach is good but instead of using it to modify the CSS use it to change the HTML tag attributes. 


 <!-- Header -->
 if(basename($_SERVER['REQUEST_URI']) == 'index' {
 <header class="header homepage">
} else {
 <header class="header">
}


Then add in the style sheet: 

//in style sheet
.header .homepage {background: transparent;}


I'm not sure about the PHP syntax

lucy24

5:28 pm on Aug 5, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



//in style sheet
.header .homepage {background: transparent;}
Urk. You meant to say
.header.homepage
without space. Otherwise it means “element of class homepage within element of class header”, when what you want is “element of dual classes header and homepage”. In fact you can say
.homepage
alone, so long as it comes after .header in the CSS. All things being equal, later rules override earlier ones.

You do also need to specify
color: black
as mentioned in an earlier post, since the text color on the ordinary black background is, ahem, presumably not black. Unless the text color is something like bright red that's to be equally visible both ways. (Ouch.)

NickMNS

5:33 pm on Aug 5, 2020 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



@Lucy24
Yes your are correct, thank you for catching that. And I was worried about getting the PHP wrong!
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:20 am May 1, 2026