Header changes unexpectedly between pages in PHP website – what am I doing wrong?

General
1

I’m currently building a website for an assignment. I’ve created a header.php and header.css, but the header behaves inconsistently—it looks different on some pages. I’ve already managed to create a footer that works fine across pages. I could also be using it wrong in my other php files…

Could someone please help me figure out what I’m doing wrong? I’ve tried asking ChatGPT, but the suggestions haven’t helped.

Here’s my code:

header.php `

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Search Database</title>
  <link rel="stylesheet" href="/../css/header.css" />
  <link rel="stylesheet" href="/../css/search.css" />
  <link rel="stylesheet" href="/../css/footer.css" />
</head>
<body>
  <header class="main-header">
    <div class="logo-container">
      <a href="/../index.php">
        <img src="/../img/Logo.png" alt="Logo" class="logo-image" />
      </a>
    </div>

    <div class="search-container">
      <form action="/../pages/search.php" method="GET" class="header-search">
        <input type="text" name="query" placeholder="Search for reviews/profiles..." required />
        <button type="submit">Search</button>
      </form>
    </div>
    
    <nav class="nav-links">
      <ul>
        <li><a href="/../pages/restaurants.php">Restaurants</a></li>
        <li><a href="/../pages/profile.php">My Profile</a></li>
      </ul>
    </nav>
  </header>

header.css

/* Header container */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3b4a3f;
  padding: 0 20px;
  height: 60px;
  font-family: sans-serif;
  color: white;
}

/* Logo container */
.logo-container {
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* Logo image */
.logo-image {
  max-height: 40px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* Optional: Add spacing so content doesn't go under header */
body {
  margin: 0;
  padding-top: 60px; /* Same height as .main-header */
}

`

2

What’s Likely the Problem

  1. Relative paths are off
    Your CSS and image paths use /../, which can behave unpredictably depending on the file structure and where the page is located. On some pages, it may resolve correctly, and on others, it may not.Example:
<link rel="stylesheet" href="/../css/header.css" />

If your file is at root/pages/profile.php, this might try to go to /css/header.css, which works. But if you’re already in the root, /../ becomes /, and things may break or double up.
2. Missing or mismatched <body> / <html> tags
Your header.php includes the opening HTML and <body> tags. But if you’re including header.php inside other pages (not as a full standalone file), then those tags may get duplicated or clash with existing ones in the main file.
3. Not including header properly in other PHP files
If you’re just copying/pasting the header code or using include/require without understanding how full pages should be structured, inconsistencies can happen.

How to Fix It

  1. Fix your paths
    Use absolute paths relative to your root, not /../. If your files are in /css/, /img/, etc., then just use:
<link rel="stylesheet" href="/css/header.css" />
<img src="/img/Logo.png" />
  1. Split header.php properly
    If you’re using header.php across multiple pages, don’t include the full <html>, <head>, and <body> tags in it. Instead, just include the <header> part.Better structure:
<!-- index.php -->
<?php include 'includes/header.php'; ?>
<main>
  <!-- Page content here -->
</main>
<?php include 'includes/footer.php'; ?>

Then in header.php, only include the <header> part — not the full page setup:

<!-- header.php -->
<header class="main-header">
  ...
</header>
  1. Use consistent HTML structure in all pages
    Every page should look like this:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Page Title</title>
  <link rel="stylesheet" href="/css/header.css" />
  <!-- Other CSS files -->
</head>
<body>
  <?php include 'includes/header.php'; ?>
  <!-- Page content -->
  <?php include 'includes/footer.php'; ?>
</body>
</html>

TL;DR

  • Stop using /../ in your file paths — use root-based paths like /css/header.css
  • Don’t include full HTML tags in header.php if you’re including it inside other pages
  • Keep your file structure and includes consistent across all pages

If you want, send me the structure of one of your full PHP pages and I can show you how to clean it up step by step.