Question

所以当我点击按钮在移动视图中打开它时，我的导航栏并没有显示ul条。以下是发生的事情的图像：

然而，我希望它显示更像这样：

但，条形图下方的条形而不是条形图。

以下是 HTML 的代码：

<nav id="nav">
    <span class="brand">Brand Name</span>
    <ul>
        <li><a href="about.html">About <i class="fa fa-angle-down"></i></a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
    <a class="nav-bars"><i class="fa fa-bars"></i></a>
</nav>

以下是导航栏的 SCSS ：

/*----------------
    Navbar Styles
  ----------------*/
.nav_fixed {
    position: fixed;
    top: -($info_bar_height / 4);
    z-index: 100;
}
nav {
    height: $navbar_height;
    width: 100%;
    margin: 0;

    color: $navbar_color;
    background: $navbar_background_color;
    font-weight: bold;
    letter-spacing: 0.025em;
    line-height: $navbar_height;
    text-transform: uppercase;

    -webkit-box-shadow: 0 8px 6px -6px $navbar_shadow_color;
    -moz-box-shadow: 0 8px 6px -6px $navbar_shadow_color;
    box-shadow: 0 8px 6px -6px $navbar_shadow_color;

    .brand {
        float: left;
        margin-left: $navbar_padding;
        font-size: 20px;
    }

    ul {
        margin: 0;
        padding: 0;
        display: flex;
        float: right;
        margin-right: $navbar_padding - 20px;

        li {
            display: inline-block;
            list-style: none;
            cursor: pointer;

            a {
                color: $navbar_color;
                text-decoration: none;
                padding: ($navbar_height / 4) 20px;
                margin: 10px 0;

                @include transition(all .175s ease-in-out);
            }
            a.nav-bars {
                display: none;
            }
        }
        li:hover {
            a {
                color: $link_hover_color;
            }
        }
    }

    a.nav-bars {
        display: none;
    }
}

/*--------------------
    Responsive Styles
  --------------------*/

@media only screen and (min-width: 320px) and (max-width: 768px) {
    .info_bar {
        display: none;
    }

    nav {
        ul {
            display: none;
            height: auto;
        }
        a.nav-bars {
            margin: 0;
            padding: 0;
            display: inline-block;
            text-decoration: none;
            float: right;
            margin-right: $navbar_padding;
            font-size: 24px;
            cursor: pointer;

            @include transition(all .2s ease-in-out);
        }

        li {
            display: block;
            float: none;
            width: 100%;

            a {
                border-bottom: 1px solid #333;
            }
        }
    }
}

.rotate {
    @include transform(rotate(90deg));
}

最后是 JS 代码：

$(function() {
    var nav = $('nav');
    var info_bar_height = $('#info_bar').height();

    $(window).scroll(function() {
        if($(this).scrollTop() > info_bar_height) {
            nav.addClass('nav_fixed');
        } else {
            nav.removeClass('nav_fixed');
        }
    });

    var bars = $('.nav-bars');
    var menu = $('nav ul');
    var menuHeight = menu.height();

    $(bars).on('click', function(e) {
        e.preventDefault();
        menu.slideToggle();
        bars.toggleClass('rotate');
    });

    $(window).resize(function() {
        var w = $(window).width();
        if(w > 320 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });
});

Answer 1

您的移动媒体查询中的li设置为display:block。

这就是为什么他们像这样堆叠在一起。

将它们设置为display:inline以强制它们从左到右显示在彼此旁边。

根据评论编辑：

您似乎在媒体查询中将height .ul设置为auto，但.nav的高度阻止其围绕其子项。 .nav设置为$navbar_height。我不确定定义$navbar_height的位置，但我只想将height设置为auto - 至少在媒体查询中，如果不是在任何地方。

为什么我的导航栏“条形图”在移动视图中无法正确显示？

1 个答案: