Question

Have you ever styling a wordpress header, and then found that header to ignore your CSS styling on lower-level pages? Could really use your help debugging this annoying issue — thank you in advance!!

I’m creating a simple portfolio site for a friend here: http://sundryspirit.com/

The homepage has a global header atop the page that should be present on every page of the site:

<div id="header">
    <div id="header-top">                   
        <div id="logo">
            <a href="<?php bloginfo('url'); ?>">
            <h1>Sundry &amp; Spirit</h1>                
            <h2>Burning Man Apparel</h2>
            </a>            
        </div>

        <div id="mainNav">
            <?php wp_nav_menu(); ?> 
        </div>
    </div>
</div>

And I’ve thrown some basic styling on this header for now, in the style.css file:

#header {
width: 100%;
height: auto;
background: #e1e1e1;
opacity: 0.75;
margin: 0 auto;
max-width: 960px;
}


#header-top {   
height: 50px;
margin: 10px;
position: relative;
padding: 10px;
text-align: center;
}

HERE’S THE ANNOYING ISSUE: The basic header styling is not carrying over onto other pages, like http://sundryspirit.com/gallery/

How can that be if the header it just coming from a header.php file?! Thanks for your help — my inexperience here is just driving me nutty.

Answer 1

You are using a relative URL to link to your stylesheet:

<link rel="stylesheet" href="wp-content/themes/sundry/style.css" />

Change it to an absolute URL:

<link rel="stylesheet" href="/wp-content/themes/sundry/style.css" />
                             ^

or use get_stylesheet.