Question

我有一个没有响应容器的css导航。在JSFiddle中here一切正常。当我把它放在网站here上时，移动菜单下拉链接会转到包装器的右上角，而不会留在容器中。如果缩小屏幕，你会看到。目前在网站上它位于标题部分之外，因为我认为可能存在冲突的代码。谢谢

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);
    }
  }
}

Answer 1

在nav标记

中添加以下css

// Navigation 
nav {
  position: relative;

Answer 2

您在此处显示的所有代码都有效。绝对定位设置了汉堡包＆＃34;其中的按钮是位置absolute或relative的最近父级。在您的小提琴和网站中，基本上是整个身体，因此元素位于右上角。

您在网站上想要的是相对于导航栏的定位。您需要将position: relative添加到<nav>或.nav-container以获得所需的结果。然后，您添加的top和left属性会将您的按钮定位在该容器中。

CSS Nav溢出容器

2 个答案: