CSS移動導航下拉列表-對齊

Question

我在codepen.io上找到了此響應式導航。 它可以在codepen.io上很好地工作，但是在JS Fiddle中卻沒那么好（包括在下面）。 當將屏幕拖到3行上時，下拉圖標鏈接會變怪，它與導航的其余部分沒有正確對齊。 此外，無論何時使用下拉菜單，這些選項都不會彼此對齊（桌面或移動設備）。 相關的下拉CSS如下-感激任何幫助，謝謝。 我把它放在這里的JS小提琴中。

    // Dropdown list
      ul li {
        min-width: 190px;
        a {
          padding: 15px;
          line-height: 20px;
        }
      }
    }
  }
}

// Dropdown list binds to JS toggle event
.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

/* Mobile navigation */

// Binds to JS Toggle
.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

這是SCSS的問題。 我只是復制並從您的codepen粘貼過來，而且現在工作正常在此的jsfiddle我從原來的分叉。 我向您的nav-container類添加了負邊距，以使用切換按鈕糾正對齊問題。 此外，您可以使用flexbox獲取菜單項的中心位置。

// Container with no padding for navbar
.nav-container {
  margin: auto;
  margin-top: -8px;
  display: flex;
  justify-content: center;

}

Answer 2

請參閱： https ： //jsfiddle.net/z8rxe922/5/

您只需要使用relative位置而不是absolute位置，並且在響應屏幕中將padding設置為0即可。

.navmobile {
  position: relative;
  float:right;
}

@media only screen and (max-width: 800px) {
  nav { 
    padding:0px;
  }
}

您的第二個問題是什么？ 這還不清楚。