• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 737
  • Last Modified:

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

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
leachj
Asked:
leachj
  • 11
  • 8
  • 6
2 Solutions
 
rgranlundCommented:
Yes but you will need to set an header attribute within the CSS.  Can you please supply a url?
0
 
leachjAuthor Commented:
0
 
rgranlundCommented:
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
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
leachjAuthor Commented:
That is correct.  At this point the home page as you can see would not benefit.  However the blog page for instance would.
0
 
rgranlundCommented:
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
 
leachjAuthor Commented:
Do this in the header.php?
0
 
DzynitCommented:
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
 
leachjAuthor Commented:
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
 
DzynitCommented:
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
 
DzynitCommented:
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
 
leachjAuthor Commented:
Closer but not quite..   Have a look.
0
 
rgranlundCommented:
You did not place the nave inside of the div.  Also, you have the sidebar in the div also.
0
 
DzynitCommented:
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
 
leachjAuthor Commented:
Nope....that whited out the menu bar.   I changed it back.

rgranlund,
can you elaborate?
0
 
DzynitCommented:
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
 
DzynitCommented:
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
 
rgranlundCommented:
#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
 
rgranlundCommented:
Also, do what Dzynit suggested with the CSS.
0
 
leachjAuthor Commented:
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
 
DzynitCommented:
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
 
DzynitCommented:
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
 
leachjAuthor Commented:
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
 
leachjAuthor Commented:
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
 
leachjAuthor Commented:
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
 
leachjAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 11
  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now