如何制作响应式导航栏？

Question

这是我的导航栏：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="/img/logo.png"></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/item1/">LONG<br>ITEM1</a></li>
        <li><a href="/item2/">LONG<br>ITEM 2</a></li>
        <li><a href="/item3/">LONG<br>ITEM 3</a></li>
        <li><a href="/item4/">LONG<br>ITEM 4</a></li>
        <li><a href="/item5/">LONG<br>ITEM 5</a></li>
      </ul>
    </div>
  </div>
</nav>

和css：

.navbar {
  min-height: 100px;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 25px;
  margin-bottom: 0px;
  padding: 0px 70px;
}


.navbar-brand>img {
  height: 70px;
}

.navbar-brand {
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-default {
    background: #5aa0d1;
    border-radius: 0;
    -webkit-box-shadow: none;
           -box-shadow: none;
    border: 0;
}

.navbar-default .navbar-brand {
  color: #fff14f;
}

.navbar-default .navbar-nav > li > a {
  color: #fff14f;
  line-height: 24px;
  padding-top: 28px;
}

.navbar-default .navbar-nav>li.active>a {
  color: #ffffff;
  background-color: transparent;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
  color: #ffffff;
  background-color: transparent;
}


.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
  color: #ffffff;
}

它在小型设备（iPad、iPhone、Android 设备）上显示效果不佳 - 一些导航栏元素会覆盖其他元素（参见 vkko.ru 上的真实示例）。

那里有什么问题？我应该如何解决这个问题？

Answer 1

我可以在这里看到两个问题，因为您没有具体说明您想要修复的内容。

徽标对于 xs 屏幕来说太大了，当您打开汉堡菜单时，分隔线会覆盖在徽标上。我注意到您正在使用图像作为徽标，因此您实际上并不需要使用 navbar-brand，因为该类为基于文本的徽标添加了不必要的 css，您可以简单地使用 pull-left 类。

  <a class="pull-left" href="/"><img src="/img/logo.png"></a>

另一个是字体大小太大，因此在较小的设备上会将链接列表推送到下一行。您可以使用“媒体查询”来检测用户何时使用较小的设备并相应地调整字体大小，我已使用 this answer 的 css 解决方案来解决您的问题。

我制作了一支笔来帮助您将上述所有内容可视化。希望能帮助到你。 http://codepen.io/anon/pen/PqEmgP

Answer 2

我只使用 CSS、JS 和 JQuery 创建了一个响应式导航栏。不需要额外的库/插件。

• 在移动视图上添加了关闭、打开导航栏的动画。
• 添加了动画汉堡菜单。

您可以在此处查看演示+代码：https://codepen.io/jerrygoyal/pen/XEZvgG

HTML：

<nav class="navbar-menu">
        <a class="nav-homepage">
            JerryGoyal
        </a>
        <div class="nav-menu-select">
            <a class="nav-hamburger">
                    <div class="hamburger bar1"></div>
                    <div class="hamburger bar2"></div>
                    <div class="hamburger bar3"></div>
                </a>
        </div>
        <ul class="nav-menu-options">
            <li>
                <a>Apps</a>
            </li>
            <li>
                <a>About Me</a>
            </li>
            <li>
                <a>Contact</a>
            </li>
        </ul>

    </nav>

JS：

$(document).ready(function () {

    initNavbar();

});

function initNavbar(){
    // 0 = hide, 1 = visible
  var menuState = 0;
    /* Add a Click event listener to btn-select */
    $(".nav-hamburger").on("click",function() {
        $(this).toggleClass('change');
      if(menuState === 0) {
        $(".nav-menu-options").slideDown("slow");
        menuState = 1;
      } else {
        $(".nav-menu-options").slideUp("slow");
        menuState = 0;
      }
    });
}

CSS：

/*****************************************************      
                 NAV BAR START
*****************************************************/
.navbar-menu {
  background-color: #005ec8;
  width: calc(100%);
  height: 55px;
}
.navbar-menu a{
  color: #ffffff;
  text-decoration: none;
  font-size: 17px;
  cursor: pointer;
}

.navbar-menu a:hover {
  background-color: #fff;
  color: #005ec8;
}

.nav-menu-options li a {
  display: block;
  padding: 18px;
}

.nav-homepage{
  display: inline-block;  
  font-weight: bold;
  font-size: 20px !important;
  letter-spacing: 1px;
  position: absolute;
  z-index: 1;
  padding: 17px;
}

.nav-menu-select {
  margin: 0;
  text-align: right;
  height: inherit;
}
.nav-hamburger{
  display: inline-block;
  padding: 13px;
}

.nav-menu-options {
  display: block;
  text-align: right;
  width: 100%;
  margin: 0px;
  padding: 0px;
  background-color: inherit;
}



/* DESKTOP */
@media screen and (min-width: 750px) {
  .nav-menu-select{
    display: none;
  }
  .nav-menu-options{
    display: block !important;
    border-bottom: 0;
  }
  .nav-menu-options li{
    display: inline-block;
  }
}
/* MOBILE */
@media screen and (max-width: 750px) {
  .navbar-menu {
    margin: 0;
  }
  .nav-menu-options {
    display: none;
    position: relative;
    text-align: center;
  }
  .nav-menu-options li{
    display: block;
  }

}
.hamburger {
  width: 25px;
  height: 2px;
  background-color: currentColor;
  margin: 6px 0;
  transition: 0.4s;
}
.nav-hamburger:before{
  content: "";
    position: absolute;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    top: 8px;
    right: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}
.nav-hamburger.change:before{
  border: 2px solid currentColor;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-4px, 7px);
  transform: rotate(-45deg) translate(-4px, 7px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-4px, -7px);
  transform: rotate(45deg) translate(-4px, -7px);
}
/*****************************************************      
                 NAV BAR END
*****************************************************/
body{
  background-color:#ffa700;
  margin:0
}