/    Sign up×
Community /Pin to ProfileBookmark

Change navbar background color on 1 page

Copy linkTweet thisAlerts:
Aug 03.2020

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=”180×180″ href=”/apple-touch-icon.png”>
<link rel=”icon” type=”image/png” sizes=”32×32″ href=”/favicon-32×32.png”>
<link rel=”icon” type=”image/png” sizes=”16×16″ href=”/favicon-16×16.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.

to post a comment
CSS

11 Comments(s) ↴

Copy linkTweet thisAlerts:
@daddyfincoAug 03.2020 — Use the <style></style> tag to override the styles in your css file.

Put the custom style only on the required page.
Copy linkTweet thisAlerts:
@act78723authorAug 03.2020 — @daddyfinco#1621718 All the pages use the same header.php. There is no header section on any of the pages.
Copy linkTweet thisAlerts:
@daveyerwinAug 03.2020 — @act78723#1621722 said ...

All the pages use the same header.php. There is no header section on any of the pages.
- - -
that is no problem

just follow the advice of daddyfinco
Copy linkTweet thisAlerts:
@act78723authorAug 03.2020 — @DaveyErwin#1621726 There is no header section to put the style tags into. This is what index,php looks like:
``<i>
</i>&lt;?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-&gt;prepare("INSERT INTO access (address) values (?)");
$stmt-&gt;execute([$ip]) ;

?&gt;

&lt;?PHP require_once("header.php"); ?&gt;

&lt;!-- Header --&gt;
&lt;header class="header"&gt;
&lt;div class="header-content"&gt;
&lt;!-- &lt;div class="p-large"&gt; --&gt;
&lt;div class="header__top"&gt;FoxClone&lt;/div&gt;
&lt;/div&gt;

&lt;p class="p-small"&gt;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.&lt;/p&gt;

&lt;/div&gt;
&lt;/header&gt; &lt;!-- end of header --&gt;

&lt;?PHP require_once("footer.php"); ?&gt;<i>
</i>``
Copy linkTweet thisAlerts:
@tracknutAug 03.2020 — If it were me, I would not put all that in the header.php. At a minimum, I would have a header.php which was everything before the <body>, and then a second included file called navbar.php, which looks to be included right after the <body> tag. In other words, the <body> tag will exist in every page, and not in an include.

At that point, you can then add classes to the <body> element, like <body class="index"> or <body class="contents"> and then reference those classes in your css to change colors or whatever.
Copy linkTweet thisAlerts:
@daveyerwinAug 03.2020 — @act78723#1621737 said ...

There is no header section to put the style tags into.
- - - -- -- --- --- -

put the <style></style> tag to override the styles

at the top of the individual pages.

as daddyfinco has said ...

Put the custom style only on the required page.
Copy linkTweet thisAlerts:
@act78723authorAug 03.2020 — Could I use the following in header.php to modify the background of the navbar?
``<i>
</i> if(basename($_SERVER['REQUEST_URI']) == 'index' {
.navbar
background: transparent;
} <i>

</i>``
Copy linkTweet thisAlerts:
@tracknutAug 03.2020 — Yes, but not literally that, as you'd need to echo out a string with that css in it, and either need to do this from within the CSS section or a new <style> section of the header code. But eww it's ugly that way...
Copy linkTweet thisAlerts:
@dhanushx012Aug 04.2020 — If it were me, I would not put all that in the header.php. At a minimum, I would have a header.php which was everything before the <body>, and then a second included file called navbar.php, which looks to be included right after the <body> tag. In other words, the <body> tag will exist in every page, and not in an include.

Copy linkTweet thisAlerts:
@act78723authorAug 05.2020 — @dhanushx012#1621758 That's exactly what I've done. Thanks for the reply.
Copy linkTweet thisAlerts:
@dhanushx012Aug 18.2020 — @dhanushx012#1621758 Yes, but not literally that, as you'd need to echo out a string with that css in it, and either need to do this from within the CSS section or a new <style> section of the header code. But eww it's ugly that way

**Links removed by Site Staff so it doesn't look like you're spamming us. Please don't post them again.*
×

Success!

Help @act78723 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.26,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...