Edit width of the burger menu content but keep background full width

Question

I'm very new to coding and am trying to create a website as practice, but I've hit a brick wall.

I want my navigation to have a full width background, but the content to be constrained to 1180px

I've tried using

width: 1180px;
margin: 0 auto;

the issue that I'm having is that doing this contained the clicked burger menu background.

html:

<header class="header">
  <a href="/" class="logo">LOGO</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>

css:

.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #1a1a1a;
}

.header li a {
  display: inline-block;
  padding: 20px 20px;
  text-decoration: none;
  color: #B3B3B3;
}

.header li a:hover {
  color: #fff;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

https://codepen.io/zwirled/pen/PoPjxym

Any help is much be appreciated!

Thanks

https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen?lq=1 — Paulie_D, Apr 28 '20 at 18:56
Thanks for this, although I'm not sure it helps my situation... I need the header to all stay as one tag for the burger menu to work (or so i think)... I've tried setting out in separate div tags but it breaks the menu so it doesn't perform as desired — Zwirled, Apr 28 '20 at 20:15

retterBadach · Accepted Answer · 2020-04-29T15:28:31.870

0

The problem is position:fixed. Use a div element as a position aid. The elements will take the div element as the containing block element. It being its direct descendant. Take the input element out of the div element to control the drop down. Add the margin: 0 auto for both the li and the position aid.

HTML:

<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <div class="positionaid"> 
    <a href="/" class="logo">LOGO</a>
    <label class="menu-icon" for="menu-btn">
      <span class="navicon"></span>
    </label>
   </div>
    <ul class="menu">
     <li><a href="#work">Work</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
    </ul>
</header>

CSS:

.header {
  left: 0px;
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 3;
}
.header li, .positionaid {
   width:1080px;
   margin: 0 auto;
}

Good luck.

edited Apr 29 '20 at 15:28

answered Apr 28 '20 at 20:45

retterBadach

86
4

Hi, thank you for your help! I have updated my CodePen with this and it is almost right, however I also want the logo and burger menu icon items to be 1080px too. https://codepen.io/zwirled/pen/PoPjxym Here's an image of what I mean – sorry I should've done this from the beginning! https://imgur.com/rnicwoP – Zwirled Apr 29 '20 at 07:51
Thank you! But now my drop down menu is contained in the div, so the black background is no longer full browser width. I've updated the codepen so you can see the issue. Is there any way to make the black background full width? Thanks for all your help! https://codepen.io/zwirled/pen/PoPjxym – Zwirled Apr 29 '20 at 10:48
That's it!! Thank you so much for your help, I've been stuck on this for days! – Zwirled Apr 29 '20 at 18:05
You're welcome. Could you select my answer as accepted? Thank you. – retterBadach Apr 29 '20 at 18:15

Edit width of the burger menu content but keep background full width

1 Answers1