How to extend fixed nav beyond container div but with text aligned with container

Question

Basically I want a fixed navigation that extends the length of the viewport so that that background and border-bottom covers the width of the viewport, but I want the text (the nav links) to remain aligned with the container div that it's inside.

I've tried playing with the margin-left at negative %'s, but while that fixes the navigation across the width of the viewport, the text (nav links) then disappears. How can I get them back into view and containing JUST THE TEXT inside the parent container div? (I really hope that makes sense for someone to understand) Again, I basically just want that border-bottom on the site-nav to run the length of the viewport with the text remaining where it is.

As a side note: this is being designed for a wordpress theme.

.container {
max-width: 928px;
margin: 0 auto;
padding-left: 20px;
padding right: 20px;
overflow: hidden;
}

/*Primary Header Menu*/

.site-header {
 margin: 0 auto;
}

.site-header nav {
 background-color: #FFF;
 position: fixed;
 z-index: 99999;
 width: 100%;
 height: 50px;
 top: 0;
 padding-top: 15px;
 text-transform: uppercase;
 font-size: 90%;
 border-bottom: 1px solid #393734;
}


.site-header nav ul li {
 margin-right: 5px;
 position: relative;
 width: 150px;
 z-index: 1;
}

.site-header nav ul li a:link,
.site-header nav ul li a:visited {
 display: block;
 padding: 10px 18px;
 text-decoration: none;
}

.site-header nav ul li a:hover {
 color: #ECECEC;
}


.site-header nav ul li.current-menu-item a:link,
.site-header nav ul li.current-menu-item a:visited,
.site-header nav ul li.current-page-ancestor a:link,
.site-header nav ul li.current-page-ancestor a:visited {
 color: #006ec3;
}

/*dropdown menu for subs*/
.site-header nav ul ul {
 display: none;
 background-color: #FFF;
}

.site-header nav ul li:hover ul{
 display: block;
 position: absolute;
 top: 30px;
 padding-left: 0;
}

/*prevents subs from displaying side by side*/
.site-header nav ul ul li,
.site-header ul ul a {
 float: none;
}

<body <?php body_class(); ?>>
 
 <div class="container">
 
  <header class="site-header">
   
   <nav class="site-nav">

    <?php
    
    $args = array(
     'theme_location' => 'primary'
    );
    
    ?>
    
    <?php wp_nav_menu(  $args ); ?>
    
   </nav>

   <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
   
  </header>

Probable duplicate - http://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen — Paulie_D, Dec 07 '15 at 14:22

score 1 · Accepted Answer · answered Dec 07 '15 at 14:25

You will need to alter the html of the page for this to function the way you need.

The .container has a set width that the site is using to center the main content.

You will need to remove the top most <div class="container"> to below the <header> then add a new <div class="container"> within the <nav>.

You can then style the nav with a background color, border etc...

<body <?php body_class(); ?>>
 
 
  <header class="site-header">
   
   <nav class="site-nav">
              
 <div class="container"> <!-- INCLUDE THE .CONTAINER CLASS INSIDE THE NAV -->

    <?php
    
    $args = array(
     'theme_location' => 'primary'
    );
    
    ?>
    
    <?php wp_nav_menu(  $args ); ?>
      </div>
    
   </nav>

   <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
   
  </header>
 <div class="container">
      <!--  OTHER CONTENT...  -->

Awesome that works pretty well! I just altered it a bit because it was shoving the header image outside of the container. So the .container class now applies to the content within the nav and then to the header image and again after the .site-header class for the "other content" Thanks so much! — Elle, Dec 07 '15 at 14:34

How to extend fixed nav beyond container div but with text aligned with container

1 Answers1