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>
1 answers
solution1
1 ACCPTED 2015-12-07 14:25:09
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... -->
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.