Extending Background Color Beyond Wrapper
Question
I am trying to extend the background color of my nav-wrapper div or in general, my navigation area, beyond the 960px container. I have tried some techniques, but nothing has appeared to be working. See attached code and JSFiddle.
JSFidde: Header Background Color Extend
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Responsive 3-Line Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<link type="text/javascript" src="navicon.js">
</head>
<body>
<!-- Start Wrapper -->
<div class="wrapper">
<!-- Start Navigation Wrapper -->
<nav class="nav-wrapper">
<a href="#" id="logo"><img src="tappery.png"/></a>
<!-- Start Navigation Links -->
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- End Navigation Links -->
</nav>
<!-- End Navigation Wrapper -->
<!-- Start Content -->
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla imperdiet ante orci, vitae auctor risus pharetra at. Quisque gravida a massa eget hendrerit. Nulla facilisi. Ut rutrum commodo faucibus. Aenean nec libero condimentum, vehicula nisi ut, ullamcorper felis. Ut non tempus odio. Donec vulputate blandit adipiscing. Ut condimentum feugiat lacus. Morbi eget mi pulvinar, imperdiet quam non, commodo ante. Proin vel urna in quam malesuada tincidunt. Suspendisse bibendum lacinia mi, et consectetur felis. Quisque a sem vel justo condimentum scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec molestie dapibus quam, nec pharetra nisl pretium in. Fusce blandit felis vitae eros tempor, in tempor neque malesuada. Duis in dignissim sem.</p>
</div>
<!-- End Content -->
</div>
<!-- End Wrapper -->
<script type="text/javascript">$("#nav").addClass("js").before('<div id="menu">☰</div>');
$("#menu").click(function(){
$("#nav").slideToggle();
});
$(window).resize(function(){
if(window.innerWidth > 768) {
$("#nav").removeAttr("style");
}
});</script>
</body>
</html>
CSS:
html, body {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background-color: #cecece;
}
.wrapper {
top:0;
margin-top: 0;
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #fff;
overflow: hidden;
}
#logo {
width: 200px;
}
#logo img {
width: 150px;
height: 40px;
}
#nav {
width: 100%;
}
#content {
margin-top: 50px;
}
li {
}
li:last-child {
border-right:none;
}
li a {
display: block;
width:100%;
background:#fff;
color: #3d6430;
font-size:1.35em;
text-decoration: none;
margin-top: 5px;
}
@media screen and (max-width: 768px) {
.wrapper {
width: 100%;
overflow: hidden;
}
#nav {
clear: both;
}
#menu {
width:1.4em;
display: block;
background:#fff;
font-size:1.35em;
text-align: center;
float: right;
top:0;
}
#logo {
float: none;
}
#nav.js {
display: none;
padding: 0;
}
ul {
width:100%;
list-style:none;
height: auto;
}
li {
width:100%;
border-right:none;
border-top: 1px solid #3d6430;
}
}
@media screen and (min-width: 768px) {
.nav-wrapper {
background-color: #fff repeat-x;
width: 100%;
overflow: hidden;
position: fixed;
z-index: 100;
}
#nav {
clear: both;
}
#logo {
float: left;
display: inline;
}
ul {
width:100%;
background-color: #fff;
height: 40px;
padding: 0;
display: inline;
}
li {
padding: 0 20px;
float: left;
list-style-type: none;
}
#menu {
display: none;
}
}
4 answers
solution1
0 2014-04-25 18:25:13
Just set left:0; to the .nav-wrapper and remove repeat-x from background color:
.nav-wrapper {
background-color: #fff;
width: 100%;
overflow: hidden;
position: fixed;
left:0;
z-index: 100;
}
Here is a FIDDLE
solution2
0 2014-04-25 18:41:12
Okay, here is my answer. It's a little bit hackish but it should work...so, you can't confine it within the bounds of the wrapper, because it's limited to 960px. You'll need to declare something before the wrapper.
What I would do is make a small, white image that is 1px wide and however tall your nav is. Then, set the background color AND image in the body:
body{
background-image: url('white.jpg');
background-color: #cecece;
background-position: left top;
background-repeat: repeat-x;
}
There are downsides; you'd have to know the exact height of your nav, and if that changes you'd need to change the image's size as well. Let me know if that works--thank you for providing the image, it cleared up what you wanted.
solution3
0 2016-09-22 20:28:40
If anyone came here in hopes to extend background colors outside of Bootstrap container, this is how I solved it.
Bootstrap's container will give you a centered column of content on the page. But what if you want to give color to JUST ONE of the margin areas outside of Bootstrap's container?
I solved it by wrapping the container, with a flexbox-container and building 3 distinct columns: left margin column, content column, and the right margin column.
To ensure that it's always centered, I used this bit to determine the width of each margin column:
.right-box, .left-box{
width: calc((100vw - 1170px) /2);
}
Here's a code pen .
solution4
0 2017-08-05 12:12:49
Cant you just add a div before the wrapper?
Somthing like this:
|HTML|
<body>
<div class="backgroundColorContainer">
<div class="wrapper">
// code here
</div>
</div>
</body>
|CSS|
.backgroundColorContainer
{
background-color: #222222;
}
Worked for me :D
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.