Title: Create header specific stylesheet
Last modified: August 21, 2016

---

# Create header specific stylesheet

 *  [DanWhite84](https://wordpress.org/support/users/danwhite84/)
 * (@danwhite84)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/)
 * Howdy,
 * I am an artisan and so wear many hats at work, one is website stuff. I don’t 
   do this professionally, and have had help in the past getting themes made and
   such. I can do basic html and css, but get into java and php and I can get lost
   in the weeds.
 * That being said, I have a website that is based off of the Twitter bootstrap,
   I believe, and the dropdown navigation menu on my site was somehow tied to the
   table and tr and td items in the stylesheet, but it messed up how all other tables
   appeared on the site so I had to delete the items in my styles.css. I saved a
   copy, so I can later create a stylesheet that is only referenced by the header,
   and not the body, of the site. Does anyone know how I can do this?
 * Here is my code for stylesheet reference in my header:
 * <!– Styles –>
    <link href=”<?php bloginfo( ‘stylesheet_url’ ); ?>” rel=”stylesheet”
   >
 *  <!– Le fav and touch icons –>
    <link rel=”shortcut icon” href=”<?php bloginfo(‘
   stylesheet_directory’); ?>/favicon.ico” /> <?php wp_head();?> <script type=”text/
   javascript”> hs.outlineType = ’rounded-black’; </script> </head>
 * Any help would be appreciated, because it also affects the dynamic sidebar, which
   if I can figure it out for the header, I should be able to do the same for the
   dynamic sidebar as well.

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Shaun Scovil](https://wordpress.org/support/users/sscovil/)
 * (@sscovil)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824615)
 * It sounds like you’re just having a CSS issue. If you style just `tr` or `td`
   elements, it will apply to all tables sitewide; try writing your CSS to be more
   specific.
 * For example, if you have a table in your header that should be styled differently
   than other tables throughout the site, and your header is in a `header` container
   element, you could write:
 * `header td { margin: 10px; padding: 10px; }`
 * That would only apply the margin and padding to the `td` tags that are wrapped
   in a `header` element.
 * Btw, it’s always best to provide a link to the site when asking a question. I
   could have given a more specific answer if I saw the site.
 *  Thread Starter [DanWhite84](https://wordpress.org/support/users/danwhite84/)
 * (@danwhite84)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824648)
 * Thanks Shaun for the reply, I tried to add the header prefix to the table elements
   at the bottom of my styles.css that I had originally removed, but no dice. If
   that had worked it would have probably solved it all.
 * I have been inspecting the elements that are messing up, and it is something 
   with how WordPress is displaying its ul sub-menu, or maybe even ul. I don’t want
   to go around chopping up more css without really knowing why it is there in the
   first place. I also don’t know why a table would have effected how these lists
   are displaying, but it did.
 * And sorry about not giving out my website, I assumed WordPress would have displayed
   it somewhere. It is:
    [http://www.waynecain.com](http://www.waynecain.com) I 
   am specifically trying to fix the positioning of the dynamic sidebar listing 
   of the recent posts widget, as well as the positioning of the submenu in the 
   navigation bar under portfolio.
 * Any and all help is appreciated.
 *  [Shaun Scovil](https://wordpress.org/support/users/sscovil/)
 * (@sscovil)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824666)
 * Dan, what theme are you using?
 * I’m very familiar with Twitter Bootstrap and can see on your blog page that the
   sidebar and the body content are in separate rows, each with a `span16` class.
 * What that means is that your sidebar is full-width, and your content is full-
   width. Bootstrap uses a grid system (in this case, 16 columns) and each row is
   span16, meaning it spans all 16 columns.
 * So the problem is not your CSS. I bet if you switched to the default WordPress
   theme (`Twenty Twelve` until WP v3.6 is released), your sidebars would be displaying
   correctly.
 * I’m just wondering if the theme is not configured properly, or if some plugin
   or customization is messing up the layout…
 *  [Pioneer Web Design](https://wordpress.org/support/users/swansonphotos/)
 * (@swansonphotos)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824669)
 * You can very well create a header specific stylesheet. And the content/layout
   you desire for your header.
 * Create a custom header file header-slug.php. Call that header in your [Page Template](http://codex.wordpress.org/Page_Templates)
   using
 *     ```
       get_header( 'slug' );
       ```
   
 * [http://codex.wordpress.org/Function_Reference/get_header](http://codex.wordpress.org/Function_Reference/get_header)
 * Customize header-slug.php with your PHP/HTML/CSS and add the link to your stylesheet
   in the <head> section. Of course, you also create the stylesheet slug_style.css(
   based on the default stylesheet) in current theme folder. This could even be 
   tweaked, for example if for a single post page, just include what is required
   for that page…note the _media=”all”_ in below also!
 *     ```
       <link rel="stylesheet" type="text/css" media="all" href="<?php get_stylesheet_directory_uri(); ?>/slug_style.css" />
       ```
   
 * See: [http://codex.wordpress.org/Function_Reference/get_bloginfo](http://codex.wordpress.org/Function_Reference/get_bloginfo)
   
   and [http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_tag](http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_tag)
 * All the above should be done in a [Child Theme](http://codex.wordpress.org/Child_Themes).
 *  Thread Starter [DanWhite84](https://wordpress.org/support/users/danwhite84/)
 * (@danwhite84)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824777)
 * [@shaun](https://wordpress.org/support/users/shaun/)
    I am using a custom theme
   based off of the Twitter bootstrap, so there are a few tweaks here or there. 
   I had a friend who knows WordPress and some css give me a hand with what I wanted,
   and this is the only issue I’ve run into so far. Everything else seems to run
   like clockwork. Like I said, not a programmer, so I’m not sure what he changed
   compared to the original.
 * About the span 16 bit….I changed that when I was messing with the pages he had
   created to make the content full page and guess I didn’t do anything about the
   dynamic sidebar. It used to be span 11 and then span 5, but i suppose I changed
   them both to span 16 instead of what I should have.
 * It is def the css that is the issue, I have been playing with changing the div
   class and styles to try and make a particular css for the header section, and
   have made some progress on that front but can’t seem to get it just right. Here
   is the site I’ve gotten this info from: [http://stackoverflow.com/questions/9083842/unlink-a-css-stylesheet-from-specific-page-div-tag](http://stackoverflow.com/questions/9083842/unlink-a-css-stylesheet-from-specific-page-div-tag)
 * [@seacoast](https://wordpress.org/support/users/seacoast/)
 * I tried to customize the header with the code you had above, but it seemed to
   make everything wonky. I am sure I just did it wrong. Here is the part I replaced
   with your code after creating a secondary stylesheet to reference. Because I 
   am not a programmer, I don’t understand what a child theme is, or what I replace
   exactly. I usually do this by trial and error, hence the span 16 bit above. what
   do I do, after creating a secondary stylesheet, to replace this code with your
   idea?
 * `<link href="<?php bloginfo( 'stylesheet_url' ); ?>" rel="stylesheet">`
 * Thanks for the help folks.
 *  [Shaun Scovil](https://wordpress.org/support/users/sscovil/)
 * (@sscovil)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824779)
 * For the submenu, add this to the bottom of your theme’s style.css:
 *     ```
       #nav li ul.sub-menu {
       position: absolute;
       left: -20px;
       }
       ```
   
 * As far as the Recent Posts widget, the problem seems to be that the widget is
   not appearing inside of a widget container. I’m guessing whoever wrote the theme
   made a custom Bootstrap walker class to apply Twitter Bootstrap rules to widgets,
   but did not apply the before & after widget elements.
 * What that means in English is that you can’t easily single out the Recent Posts
   widget with CSS, because it is inside the same container as all of your other
   widgets with no clear boundaries. I would ask your theme developer to look into
   it.
 *  [Shaun Scovil](https://wordpress.org/support/users/sscovil/)
 * (@sscovil)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824780)
 * Btw, adjust that `-20px` to whatever looks good…probably more like `-36px` or
   so…
 *  Thread Starter [DanWhite84](https://wordpress.org/support/users/danwhite84/)
 * (@danwhite84)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824782)
 * [@shaun](https://wordpress.org/support/users/shaun/), it worked out great, but
   I tweaked it a bit and put this in instead:
 *     ```
       #nav ul li{
       	float:none;
       	left: -40px;
       }
       ```
   
 * The position absolute made the submenu never disappear because it had a left:-
   9999 property to hide it from sight when not in use. But it moved the menu back
   to where it should be, and I can do without the recent posts in the sidebar.
 * About that span 16 issue, do I just remove the sidebar completely from those 
   pages where I decided they are better off not there?
 * Again, thanks for the help.
 *  [Shaun Scovil](https://wordpress.org/support/users/sscovil/)
 * (@sscovil)
 * [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824786)
 * Depending on what layout you want on each part of your website, it might make
   sense to remove the `<?php get_sidebar(); ?>` line from certain template files.
 * To be safe, you can just comment it out with two forward slashes, like this: `
   <?php //get_sidebar(); ?>
 * So if you don’t want a sidebar in your blog index, edit `index.php` and kill 
   the get_sidebar() template tag. If you don’t want it to appear in a single post,
   edit your `single.php` file. For pages, `page.php`.
 * See the [Template Hierarchy](http://codex.wordpress.org/Template_Hierarchy) for
   a full list of which template files affect which section of the website.

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Create header specific stylesheet’ is closed to new replies.

## Tags

 * [css styles](https://wordpress.org/support/topic-tag/css-styles/)
 * [dynamic sidebar](https://wordpress.org/support/topic-tag/dynamic-sidebar/)
 * [header](https://wordpress.org/support/topic-tag/header/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 9 replies
 * 3 participants
 * Last reply from: [Shaun Scovil](https://wordpress.org/support/users/sscovil/)
 * Last activity: [12 years, 11 months ago](https://wordpress.org/support/topic/create-header-specific-stylesheet/#post-3824786)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics