Title: centered fixed position header
Last modified: August 20, 2016

---

# centered fixed position header

 *  [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/)
 * [current code results](http://twitter.com/WhatBrandonSays/status/205399967022579716/photo/1/large)
 * [psd layout](http://twitter.com/WhatBrandonSays/status/205402959499108352/photo/1/large)
 * I need my header to stay centered, and be a fixed position so it floats over 
   a scrolling body. I can’t seem to get it to work.
 * I also need the address info on the left to come down 1-2 pixels and the menu
   nav on the right to go up 3-5 pixels.
 * I’m new at this so my coding knowledge isn’t great, my code could probably be
   reduced.
 * header php code:
    _[Code moderated as per the [Forum Rules](http://codex.wordpress.org/Forum_Welcome#Posting_Code).
   The maximum number of lines of code that you can post in these forums is **ten
   lines**. Please use the [pastebin](http://wordpress.pastebin.com/)]_

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

 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766294)
 * oops,
    header code is too much.
 * [https://docs.google.com/open?id=0B6pgg48sqP6jUktYek02SXk5TGM](https://docs.google.com/open?id=0B6pgg48sqP6jUktYek02SXk5TGM)
 * I’m not sure what’s the best code for this?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766296)
 * Using Fixed Positioning in the CSS code is how you can do that. See this: [http://www.w3schools.com/cssref/sel_after.asp](http://www.w3schools.com/cssref/sel_after.asp)
 * As to your second question, try using [Firebug](http://getfirebug.com) to identify
   the CSS code that you will need to change in order to adjust the alignment of
   elements on the page.
 * If you need more specific help, you’ll need to post a link to your actual site.
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766300)
 * i used the fixed position and it shifted everything to the left and cut off the
   menu to like 500px.
    can u look at the zip file and see what i am doing wrong?
   using MAMP locally right now to view the site. i’m not sure that i div-ing up
   the header.php correctly for the css code. i wanted over all #header then inside
   a #logo, #info, and #menu for aligning and formatting.
 * not sure the best is to <span> or <div> or what.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766306)
 * What zip file are you referring to?
 * The google docs link does not work…and really, unless someone can see the actual
   site live, it’s pretty impossible to help with things like this. If you modified
   the header.php file, there may well be problems — generally, you should have 
   had plenty of CSS classes and ID’s already in the existing code to do almost 
   anything with positioning. Try validating the page to see if you have mark-up
   and/or CSS errors that are causing problems…
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766329)
 * here is the zip file with the header.php and style.css files.
    [https://files.me.com/morris.brandon/w96ra1](https://files.me.com/morris.brandon/w96ra1)
 * Can you look at the image and code?
    Can you tell me by looking at the code and
   image how you would write it?
 * I can’t seem to install wordpress twice using 1&1.
    I made a second database 
   but the install won’t work.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766340)
 * I don’t have a way to look at it using the whole theme, but if you can put up
   a generated html file, I can look at that with the CSS file — which might work
   for me to look at the code…and help you with the CSS.
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766342)
 * would saving an html file from safari work?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766344)
 * Yep — just paste the code in pastebin or wherever…
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766345)
 * doesn’t seem to look right. the nab bar is missing and menu buttons.
    i still
   can’t seem to get 1&1 to install a second wordpress.
 * do you use mamp?
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766347)
 * Yes, but it’s not currently configured for WP — I may have time to mess with 
   it tomorrow, can’t do it right now…
 * I’ll try again and post back when I figure something out…
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766350)
 * thanks i’d really appreciate it.
    did the mobile me zip file work? won’t you 
   be able to test the code out with a basic wp install on mamp?
 * i would upload what i have to a wp online, but i still can’t get it to work with
   1&1.
    i’ve done 2 wp installs on blue host before no problems.
 *  [WPyogi](https://wordpress.org/support/users/wpyogi/)
 * (@wpyogi)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766353)
 * Yes, file is fine. I just have to mess with my MAMP set-up — I’m taking a PHP
   class right now so I cleaned stuff out so I could easily access my class assignments,
   etc. Not a big deal, just some time…
 * But you could get a free trial on Dreamhost which is really easy with WP…
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766355)
 * I seemed to have gotten the fixed header to work.
    i was able to get the menu
   nav to rise up and look centered. but i had to move the the menu div to before
   the logo. so now the address info is too far off the header image.
 * does this code look correct?
 * **header code:**
 * </head>
 * <body>
    <div id=’wrap’> <div id=’header’>
 *  <div id=’menu’>
    <ul id=’nav’> <?php wp_list_pages(‘title_li=’); ?> <‘br’>
 *  </div>
 *  <h1 id=’logo’>
    <*a href=”<?php bloginfo(‘url’); ?>”*> <img src=”<?php bloginfo(‘
   template_url’); ?>/images/logo.png”> </h1>
 *  <div id=’info’>
    505 Virginia Ave Ste <‘br’> Atlanta, GA 30306 <‘br’> (505) 
   555-505 <‘br’> [mail@studios.com](https://wordpress.org/support/topic/centered-fixed-position-header/mail@studios.com?output_format=md)
   </div>
 *  </div>
    </div>
 * **CSS code:**
 * [@import](https://wordpress.org/support/users/import/) “css/reset.css”;
    [@import](https://wordpress.org/support/users/import/)“
   css/typography.css”; [@import](https://wordpress.org/support/users/import/) “
   css/layout.css”;
 * /***General Styles***/
    body { background:transparent url(‘images/background.
   jpg’) repeat scroll; color:#000; font-family:Arial, sans-serif; }
 * #wrap {
    width:1024px; margin:0 auto; } a { text-decoration: none; }
 * /***Header Styles***/
    #header { background: transparent url(‘images/navbar.png’);
   position: fixed; top: 0; width: 1024px; height: 62px;
 * }
 * h1#logo {
    margin: -17px 0px 0px 95px; float: left; }
 * #info {
    margin: 0px 0px 0px 0px; font-size: 8px; font-style: normal; font-weight:
   100; text-decoration: none; line-height: 10px; color: #808080; }
 * #menu {
    margin: 0px 85px 0px 0px;/***whole menu placement***/ }
 * ul#nav li {
    float: right; line-height: 50px; margin: 0px 15px 0px 0px; font-
   size: 14px; text-transform: uppercase; }
 * ul#nav li a {
    color:#bf001f; /***menu font color***/ }
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766356)
 * got to look right but defining the absolute real image size with height and width
   tags.
 * #header {
    background: transparent url(‘images/navbar.png’) ; position: fixed;
   top: 0; width: 1024px; height: 62px; }
 * The REAL problem now is getting my address info to display correctly in the nav
   bar next to my logo.png, and not having to just use the png to display the text.
 *  Thread Starter [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * (@bmorris110)
 * [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766359)
 * And I just somehow figured out the text problem! heck yeah.
    I put the menu div
   before the logo so it could line up. And instead of have the address info div
   after the logo div, i put it inside the logo div.
 * PLEASE, feel free to go over the full code above and let me know any tips or 
   clean up I can do.
 * <div id=’menu’>
    <ul id=’nav’> <?php wp_list_pages(‘title_li=’); ?>
 *  </div>
 *  <h1 id=’logo’>
    <*a href=”<?php bloginfo(‘url’); ?>”*><img src=”<?php bloginfo(‘
   template_url’); ?>/images/logo.png”><div id=’info’>555 Virginia Ave Ste #1Atlanta,
   GA 30305(555) [555-5055mail@google.com](https://wordpress.org/support/topic/centered-fixed-position-header/555-5055mail@google.com?output_format=md)
   </div></h1>

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

The topic ‘centered fixed position header’ is closed to new replies.

## Tags

 * [center](https://wordpress.org/support/topic-tag/center/)
 * [centered](https://wordpress.org/support/topic-tag/centered/)
 * [fixed](https://wordpress.org/support/topic-tag/fixed/)
 * [header](https://wordpress.org/support/topic-tag/header/)

 * 15 replies
 * 2 participants
 * Last reply from: [bmorris110](https://wordpress.org/support/users/bmorris110/)
 * Last activity: [14 years ago](https://wordpress.org/support/topic/centered-fixed-position-header/#post-2766359)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics