CODEWITHSUNDEEP
htmlcss
Seth Chouinard
Seth Chouinard

Reputation: 43

CSS Nav overflows container

I have a css navigation that is not responding the the container. In the JSFiddle here Everything is working fine. When I put it on the website here the mobile menu drop down link goes to the top right of the wrapper and doesn't stay in the container. If you shrink the screen you will see. Currently on the website it is outside of the header section as I thought there might have been conflicting code. Thanks

CSS

.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: $nav-background;
  height: $nav-height;
  width: $nav-height;
}
@media only screen and (max-width: $breakpoint) {
  // Hamburger nav visible on mobile only
  .nav-mobile {
    display: block;
  }
  nav {
   width: 100%;
    padding: $nav-height 0 15px;
    ul {
      display: none;
      li {
        float: none;
        a {
          padding: 15px;
          line-height: 20px;
        }
        ul li a {
          padding-left: 30px;
        }
      }
    }
  }
  .nav-dropdown {
    position: static;
  }
}
@media screen and (min-width: $breakpoint) {
  .nav-list {
    display: block !important;
  }
}
#nav-toggle {
  position: absolute;
  left: 18px;
  top: 22px;
  cursor: pointer;
  padding: 10px 35px 16px 0px;
  span,
  span:before,
  span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: $nav-font-color;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  span:before {
    top: -10px;
  }
  span:after {
    bottom: -10px;
  }
  &.active span {
    background-color: transparent;
    &:before,
    &:after {
      top: 0;
    }
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

Upvotes: 0

Views: 1933

Answers (2)

Kalaikumar Thangasamy
Kalaikumar Thangasamy

Reputation: 564

Add below css in the nav tag

// Navigation 
nav {
  position: relative;

Upvotes: 1

arbuthnott
arbuthnott

Reputation: 3819

All the code you are showing here works. The absolute positioning sets up the "hamburger" button within it's closest parent that has position absolute or relative. In both your fiddle and the website, that is basically the whole body, so the element is positioned in the upper right.

What you want on the website is positioning with respect to the navbar. You need to add position: relative to your <nav> or your .nav-container for the result you want. Then the top and left properties you add will position your button in that container.

Upvotes: 0

Related Questions