Question

当我在chrome / safari中调整浏览器窗口的大小时（在FF中不是问题），导航栏转换为汉堡包菜单，正如我编写的那样。但是当我返回到桌面大小时，菜单元素已经落在导航栏之外。

enter image description here

以下是我的代码的标题部分：

<!-- ******HEADER****** --> 
    <header id="header" class="header">  
        <div class="container">      
        <a href="http://178.62.123.221/"><img src="assets/images/figures/logo.png"></a> 

            <nav class="main-nav navbar-right" role="navigation">
                <div class="navbar-header">
                    <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button><!--//nav-toggle-->
                </div><!--//navbar-header-->
                <div id="navbar-collapse" class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active nav-item"><a href="index.html"><i class="fa fa-home"> Home</i></a></li>
                        <li class="nav-item"><a href="#who"><i class="fa fa-question"> Who</i></a></li>
                        <li class="nav-item"><a href="#what"><i class="fa fa-area-chart"> What</i></a></li>
                        <li class="nav-item"><a href="#where"><i class="fa fa-location-arrow"> Where</i></a></li>
                        <li class="nav-item"><a href="#tickets"><i class="fa fa-ticket"> Tickets</i></a></li>                
                        <!-- <li class="nav-item dropdown">
                            <a class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-delay="0" data-close-others="false" href="#">Info <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">                                
                                 <li class="nav-item"><a href="/SynapseMissionStatement.pdf" target="_blank"><i class="fa fa-location-arrow"> Mission Statement</i></a></li>
                                <li class="nav-item"><a href="/SynapseEmail.pdf" target="_blank"><i class="fa fa-ticket"> Press</i></a></li>                                              
                            </ul>  --> 


                    </ul>
                    <!--//nav-->
                </div><!--//navabr-collapse-->
            </nav><!--//main-nav-->                     
        </div><!--//container-->
    </header><!--//header-->

我的styles.css可以在这里看到：http://178.62.123.221/styles.css

有人可以建议我如何解决这个问题吗？

提前致谢。

Answer 1

尝试添加适当的浮动徽标包装，这样就不会影响导航的定位方式：

（最好为它添加一个类，但是）现在：

#header > .container > a{
    float: left;
}

汉堡菜单导致导航栏元素落在导航之外

1 个答案: