Solved

Is it possible to set a fixed header and menu in twenty eleven child theme?

Posted on 2014-03-21
25
650 Views
Last Modified: 2014-03-24
I have a twenty eleven child theme and want to make the header and menu bar static.  Is it possible?  Here is code to header.php and style.css

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.myzooanimalhospital.com/favicon.ico" />
<meta name="google-site-verification" content="1Tlou_jJ_bo5fkAZnLRMiwV5OgDFK5-KQEs60oOdVGA" />

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

<div id="page-background"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg" class="stretch"></div>

<div id="page" class="hfeed">	
        <div id="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.jpg"></a>
        </div>
        
        <div id="animals"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/animals.jpg"></div>
        
        <div id="heading-right">
        
            <div id="mynav">
                <ul>
                    <li><a href="http://www.myzooanimalhospital.com/blog/">Blog</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="https://www.facebook.com/pages/My-Zoo-Animal-Hospital-in-Columbia-MO/191168317592066" target="_blank">Facebook</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="http://www.myzooanimalhospital.com/contact/">Contact</a></li>
                </ul>
            </div>
            
            <div id="phone">573-875-3647</div>	
            
        </div>		

        <nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>

            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #access -->

	<div id="main">
	</div>

Open in new window


@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
	min-width:1048px;
}

#page {
	background-color:transparent;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding:0;
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
}

#animals {
	position:absolute;
	top:0; left:0;
	margin-left:173px;
	margin-top: 3px;
}

#heading-right {
	float:right;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
	background: transparent; 
	box-shadow: none;	
	margin: 0 auto;
	margin-top: -7px;
	/*border: 1px solid #fff;*/
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#page-banner {
	margin: 10px auto 10px;
}

#wrapper {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #2c3539;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    width: 80%;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 10px;
}

Open in new window

0
Comment
Question by:leachj
  • 11
  • 8
  • 6
25 Comments
 
LVL 7

Expert Comment

by:rgranlund
Comment Utility
Yes but you will need to set an header attribute within the CSS.  Can you please supply a url?
0
 

Author Comment

by:leachj
Comment Utility
0
 
LVL 7

Expert Comment

by:rgranlund
Comment Utility
So, you want the header and menu to always be at the top of the page, even though you have scrolled down?  The page scrolls up under the header?
0
 

Author Comment

by:leachj
Comment Utility
That is correct.  At this point the home page as you can see would not benefit.  However the blog page for instance would.
0
 
LVL 7

Expert Comment

by:rgranlund
Comment Utility
Place all of the elements of the header and the nav into a new and unique dive.  Give it an id of = "static-header" or something.  In your css file place:
#static-header {
position:fixed;
z-index:1000;
}

Then let me know if that works.
0
 

Author Comment

by:leachj
Comment Utility
Do this in the header.php?
0
 
LVL 14

Assisted Solution

by:Dzynit
Dzynit earned 250 total points
Comment Utility
Make a backup copy of your header.php and your stylesheet that you posted in your question first. Then try this for the header.php code:

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.myzooanimalhospital.com/favicon.ico" />
<meta name="google-site-verification" content="1Tlou_jJ_bo5fkAZnLRMiwV5OgDFK5-KQEs60oOdVGA" />

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

<div id="page-background"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg" class="stretch"></div>

<div id="page" class="hfeed">	
<div id="header">
        <div id="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.jpg"></a>
        </div>
        
        <div id="animals"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/animals.jpg"></div>
        
        <div id="heading-right">
        
            <div id="mynav">
                <ul>
                    <li><a href="http://www.myzooanimalhospital.com/blog/">Blog</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="https://www.facebook.com/pages/My-Zoo-Animal-Hospital-in-Columbia-MO/191168317592066" target="_blank">Facebook</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="http://www.myzooanimalhospital.com/contact/">Contact</a></li>
                </ul>
            </div>
            
            <div id="phone">573-875-3647</div>	
            
        </div>		

        <nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>

            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #access -->
</div>
	<div id="main">
	</div>
                                  

Open in new window


This in place of your stylesheet code:

@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
	min-width:1048px;
}

#page {
	background-color:transparent;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding:0;
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
}

#animals {
	position:absolute;
	top:0; left:0;
	margin-left:173px;
	margin-top: 3px;
}

#heading-right {
	float:right;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
	background: transparent; 
	box-shadow: none;	
	margin: 0 auto;
	margin-top: -7px;
	/*border: 1px solid #fff;*/
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#page-banner {
	margin: 10px auto 10px;
}

#wrapper {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #2c3539;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    width: 80%;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 10px;
}
                                  
#header {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
   }                                  

Open in new window


I copied and edit both your codes and pasted them here.
0
 

Author Comment

by:leachj
Comment Utility
That put the top on the bottom.  I left it in place so you can have a looksee.
seen better on blog page.  www.myzooanimalhospital.com/blog
0
 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
I'm sorry, in the stylesheet change that at the very end from:
#header {
    position: fixed; 
    bottom: 0;
    left: 0;
    right: 0;
   }        

Open in new window


to:

#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
   }        

Open in new window

0
 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
You should add that z-index that rgrandlund showed also.

#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
   }       

Open in new window

0
 

Author Comment

by:leachj
Comment Utility
Closer but not quite..   Have a look.
0
 
LVL 7

Expert Comment

by:rgranlund
Comment Utility
You did not place the nave inside of the div.  Also, you have the sidebar in the div also.
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
I think this might do it:
#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
    background-color: #ffffff;
   } 

Open in new window

0
 

Author Comment

by:leachj
Comment Utility
Nope....that whited out the menu bar.   I changed it back.

rgranlund,
can you elaborate?
0
 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
The div is correct - it has the wp_nav inside it and the sidebar is not inside that. Let's try setting some more z-index:

#header {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    z-index:1000;
    background-color: #ffffff;  
   }
#access { z-index: 1001; }
#main { z-index: 1; }

Open in new window

0
 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
It's giving me a little trouble on live edit testing because when I open my css editor, the nav menu comes to the front correctly. Not sure why that is, but that makes it more difficult to get it right first try.
0
 
LVL 7

Accepted Solution

by:
rgranlund earned 250 total points
Comment Utility
#header css, add background-color:#ffffff;

Line 540 in css:
#access {
    background: linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)!important;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
position:relative;
}

Try that and let me know
0
 
LVL 7

Expert Comment

by:rgranlund
Comment Utility
Also, do what Dzynit suggested with the CSS.
0
 

Author Comment

by:leachj
Comment Utility
dzynit,
whited out menu bar again.  I changed it.  Got it centered again by using auto for left.

#header {
    position: fixed; 
    top: 0;
    left: auto;
    z-index:100000;
}

Open in new window

0
 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
This also needs added to bump the main content section on initial page load, but you might need to fuss with the number to get it where you want:

#main { margin-top: 190px; }
0
 
LVL 14

Expert Comment

by:Dzynit
Comment Utility
Did you edit the #access line 540 that rgranlund suggested? Do that and also put back the white background on the #header, but leave it for a bit for us to look at.
0
 

Author Comment

by:leachj
Comment Utility
Here is what is in place right now for style.css  .....

@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
	min-width:1048px;
}

#page {
	background-color:transparent;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding:0;
	margin-top: 200px;
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
}

#animals {
	position:absolute;
	top:0; left:0;
	margin-left:173px;
	margin-top: 3px;
}

#heading-right {
	float:right;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
    background: linear-gradient(#252525, #0A0A0A) repeat scroll 0 0 rgba(0, 0, 0, 0)!important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4)!important;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
position:relative;
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#page-banner {
	margin: 10px auto 10px;
}

#wrapper {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #2c3539;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    width: 80%;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 10px;
}
                                  
#header {
    position: fixed; 
    top: 0;
    left: auto;
    background-color: #ffffff;
    z-index:1000;
}

Open in new window

0
 

Author Comment

by:leachj
Comment Utility
Ok...  worked on this over the week end.  First off, thanks to both of you for your help.  You got me pointed down the path.  I will split points.  Got it working, pretty much.  I would like to figure out how to keep the background static, but a single image wasn't used for it.  That will be the topic of another post though.  Here is what it looks like now.  

www.myzooanimalhospital.com  and  www.myzooanimalhospital.com/blog

I used a plugin to float the sidebar widgets up and down the page after getting everything to scroll ok.  Here are the changes to style.css and header.php.  added some divs in the appropriate pages also.

style.css changes only

#page {
	background-color: #fff;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding_top: 0px;
	
}

#animals {
	position:absolute;
	background-color: #fff;
	top:0; left:0;
	margin-left:164px;
	margin-top: 0px;
	width: 835px;
	height: 163px;
}

#heading-right {
	margin-right: 10px;
	position:relative;
}

#access {
   background: transparent; 
	background: url("images/footer-bg.jpg") repeat-x scroll 0 0 #040404;
	color: #ffffff;
	box-shadow: none;
	margin: 0 auto;
	margin-top: -7px;
	/* border: 1px solid #fff; */
}

#page-banner {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
	
}

#wrapper {
	border: 7px solid #2c3539;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	margin-top: 0px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
	padding-top: 40px;
}

.single #primary,
.blog #primary,
.archive #primary {
    height: auto;
    width: 80%;
    padding-top: 40px;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 195px;
    padding-top: 0px;
    
}
                                  
#header {
    z-index:1000;
    
   }
   
#wrappera {
    position:fixed;
    width: 1000px;
    z-index:1000;
   }

#wrapper-lower {
    padding-top: 138px;
   
   }

#primary {
	padding-top: 180px;
}

#sbwrapper {  
    width: 140px; 
    padding-left: 40px;
    margin-left: 818px; 
    display:block;  
}
   

Open in new window


header.php changes only

<div id="wrappera" class="hfeed">
    <div id="header"> 

       


</div><!-- #wrappera -->

Open in new window

0
 

Author Comment

by:leachj
Comment Utility
Here is entire files...

style.css

@import url('../twentyeleven/style.css');

/*
Theme Name: My Zoo
Description: Child Theme Of Twenty Eleven
Author: SearchworxX
Author URI: http://www.searchworxx.com/
Version: 1.0
Template: twentyeleven
*/

@font-face {  
	  font-family: "Helvetica Neue Light" ;
	  src: url('font/helvetica-neue-light.eot');  
	  src: url('font/helvetica-neue-light.eot?#iefix') format('embedded-opentype'), url( 'font/helvetica-neue-light.ttf' ) format("truetype");
	  font-weight:normal;  
}

@font-face {  
	  font-family: "Segoe Print" ;
	  src: url('font/segoepr.eot');  
	  src: url('font/segoepr.eot?#iefix') format('embedded-opentype'), url( 'font/segoepr.ttf' ) format("truetype"); 
	  src: local("Segoe Print"); 
	  font-weight:normal;
}

* {
	font-family: "Helvetica Neue Light", Arial, Helvetica, sans-serif;
}

#content ul

{
	list-style-type: none;
	margin-left: 20px;
}

#content li

{
	background-image:url(images/red-paw-small.png);
	background-repeat: no-repeat;
	padding-left: 20px;
	margin-left: 0 !important;
	line-height:1.5em !important;
	
}

/* =Structure
----------------------------------------------- */

body {
	padding:0;
	background-color:#fff;
		
}

#page-background {position:absolute; top:0; left:0; width:100%; height:743px;}

.stretch {
    width:100%;
    height:743px;
    min-width:1048px; 
 
}

#page {
	background-color: #fff;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding_top: 0px;
	
}

#secondary {
	margin-right: 0;
	width: 180px;
}

/* =Header
----------------------------------------------- */

#logo {
	float:left;
		
}

#animals {
	position:absolute;
	background-color: #fff;
	top:0; left:0;
	margin-left:164px;
	margin-top: 0px;
	width: 835px;
	height: 163px;
}

#heading-right {
	margin-right: 10px;
	position:relative;
}

#mynav {
	float:right;
	margin-top: 10px;
}

#mynav ul li {
	display:inline;
	list-style:none;
	color:#b60000;
}

#mynav ul li a {
	font-size: 14px;
	color:#b60000;
	font-family:Helvetica, Arial, sans-serif;
}

#phone {
	clear:right;
	float:right;
	font-size:29px;
	font-family:Helvetica, Arial, sans-serif;
	line-height: 1em;
	margin-top: -20px;
}

/* =Menu
-------------------------------------------------------------- */

#access {
   background: transparent; 
	background: url("images/footer-bg.jpg") repeat-x scroll 0 0 #040404;
	color: #ffffff;
	box-shadow: none;
	margin: 0 auto;
	margin-top: -7px;
	/* border: 1px solid #fff; */
}

#access ul {
	font-size: 15px;
	list-style: none;
	margin: 0 0 0 -4em;
	padding-left: 0;
}

#access a, #access ul ul a {
	color: #fff;	
	line-height: 2em;
	padding: 1px 13px 2px;	
}

#access a:hover, #access li:hover > a,
#access a:focus {
	background:url(images/nav-highlight-bg.png) repeat-x #6c6060 !important;
	color:#fcf085 !important;
}

#access ul li ul {
	margin-top:-18px !important;
}

#access ul ul a {
	background: #000;
}

/* =Home
----------------------------------------------- */

#primary .myhome {
	margin:0;
	width:100%;
	
}

#slider {
	margin: 10px auto 30px;
}

#sliderstatic {
	margin: 10px auto 30px;
}

#home-content {
	border: 7px solid #b00000;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 10px;
	margin-bottom: 10px;
        clear: both;
}

#bottom-box {
	background:url(images/bottom-box.png) no-repeat #fff;
	width:1000px;
	height:274px;
	margin-bottom: 10px;
}

#box-1, #box-2, #box-3 {
	float:left;
	text-align:center;
}

#bottom-box h3.widget-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:7px 0 5px;
	text-transform:capitalize;
}

#box-1 {
	width:325px;
	margin-left: 5px;
}

#box-2 {
	width:335px;
	margin-left: 5px;
}

#box-3 {
	width:320px;
	margin-left: 5px;
}

.box-desc {
	width:244px;
	height:auto;
	font-size:14px;
	line-height:1.2em;
	margin:0 auto;
	text-align:left;
}

/* =Content
----------------------------------------------- */

h1.entry-title {
	color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
}

#home-content h1 {
        color:#b80000;
	font-size:24px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	padding:0 0 10px;
	
}

#page-banner {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
	
}

#wrapper {
	border: 7px solid #2c3539;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	margin-top: 0px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
	padding-top: 40px;
}

/* =Sidebar
----------------------------------------------- */

#secondary aside {
	margin-bottom:10px;
	background:url(images/sidebar-bg.jpg) repeat-x #fff;
	padding:10px;
	border:3px solid #A0A3A8;
	font-size:13px;
}

#secondary aside ul {
	margin-left: 13px;
}
#secondary h3.widget-title {
	color:#b80000;
	font-size:15px;
	font-family: "Segoe Print", Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	text-align:center;
	text-transform:capitalize;
}

/* =Footer
----------------------------------------------- */

#footer {
	background:url(images/footer-bg.jpg) repeat-x #040404;
	width:100%;
	min-height:33px;
	overflow:hidden;		
	font-size: 16px;
	color: #fff;
	position:relative;
	max-width: auto;
	min-width: 1048px;
}

#footer-content {
	width: 1000px;
	margin: 0 auto;
}

.single #primary,
.blog #primary,
.archive #primary {
    height: auto;
    width: 80%;
    padding-top: 40px;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 195px;
    padding-top: 0px;
    
}
                                  
#header {
    z-index:1000;
    
   }

#wrappera {
    position:fixed;
    width: 1000px;
    z-index:1000;
   }

#wrapper-lower {
    padding-top: 138px;
   
   }

#primary {
	padding-top: 180px;
}

#sbwrapper {  
    width: 140px; 
    padding-left: 40px;
    margin-left: 818px; 
    display:block;  
}  

Open in new window


header.php

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<link rel="shortcut icon" href="http://www.myzooanimalhospital.com/favicon.ico" />
<meta name="google-site-verification" content="1Tlou_jJ_bo5fkAZnLRMiwV5OgDFK5-KQEs60oOdVGA" />

<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;

	wp_title( '|', true, 'right' );

	// Add the blog name.
	bloginfo( 'name' );

	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";

	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );

	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>

<body <?php body_class(); ?>>

<div id="page-background"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/bg.jpg" class="stretch"></div>

<div id="page" class="hfeed">	

<div id="wrappera" class="hfeed">
    <div id="header"> 

        <div id="logo">
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
            <img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/logo.jpg"></a>
        </div>
        
        <div id="animals"><img src="<?php bloginfo( 'stylesheet_directory' ); ?>/images/animals.jpg"></div>
        
        <div id="heading-right">
       
            <div id="mynav">
                <ul>
                    <li><a href="http://www.myzooanimalhospital.com/blog/">Blog</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="https://www.facebook.com/pages/My-Zoo-Animal-Hospital-in-Columbia-MO/191168317592066" target="_blank">Facebook</a>&nbsp;&nbsp;|&nbsp;</li>
                    <li><a href="http://www.myzooanimalhospital.com/contact/">Contact</a></li>
                </ul>
            </div>
            
            <div id="phone">573-875-3647</div>	
            
        </div>		


        <nav id="access" role="navigation">
            <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
            <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
            <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>

            <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
            <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>
            <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
        </nav><!-- #access -->

</div><!-- #header -->

</div><!-- #wrappera -->

	<div id="main">
	</div>

Open in new window

#page {
	background-color: #fff;
	margin: 0 auto;
	width: 1000px;
	position:relative; z-index:1;
}

#main {
	padding_top: 0px;
	
}

#animals {
	position:absolute;
	background-color: #fff;
	top:0; left:0;
	margin-left:164px;
	margin-top: 0px;
	width: 835px;
	height: 163px;
}

#heading-right {
	margin-right: 10px;
	position:relative;
}

#access {
   background: transparent; 
	background: url("images/footer-bg.jpg") repeat-x scroll 0 0 #040404;
	color: #ffffff;
	box-shadow: none;
	margin: 0 auto;
	margin-top: -7px;
	/* border: 1px solid #fff; */
}

#page-banner {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
	
}

#wrapper {
	border: 7px solid #2c3539;
	background-color:#fff;
	font-size:14px;
	line-height:1.2em;
	padding: 5px 9px 5px 17px;
	margin-top: 0px;
	overflow:hidden;
	margin-bottom:30px;
}

#primary .mypage {
	margin:0;
	width:750px;
	float:left;
	padding-top: 40px;
}

.single #primary,
.blog #primary,
.archive #primary {
    height: auto;
    width: 80%;
    padding-top: 40px;
}

.single #page-banner img,
.blog #page-banner img,
.archive #page-banner img {
    height: auto;
    width: 100%;
    margin-bottom: 0px;
}

.single #secondary,
.blog #secondary,
.archive #secondary {
    margin-top: 195px;
    padding-top: 0px;
    
}
                                  
#header {
    z-index:1000;
    
   }
   
#wrappera {
    position:fixed;
    width: 1000px;
    z-index:1000;
   }

#wrapper-lower {
    padding-top: 138px;
   
   }

#primary {
	padding-top: 180px;
}

#sbwrapper {  
    width: 140px; 
    padding-left: 40px;
    margin-left: 818px; 
    display:block;  
}
   

Open in new window

<div id="wrappera" class="hfeed">
    <div id="header"> 

       


</div><!-- #wrappera -->

Open in new window

0
 

Author Closing Comment

by:leachj
Comment Utility
Although neither was the exact solution, it forced me to closely scrutinize how the elements function together.  I was able to produce working pages that I envisioned.

Thanks!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Now that you've installed WordPress 2.9 (http://www.experts-exchange.com/articles/Web_Development/Blogs/WordPress/WordPress-2-9-What-to-Expect-When-Upgrading-to-WordPress-2-9.html?) on your site, you need to install some plugins to get the most out …
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now