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

Question

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

这是我的代码的标题部分:

<!-- ******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

尝试为您的 Logo 包装器添加一个适当的 float ，这样它就不会干扰您的导航定位方式:

(最好给它添加一个类，但是)现在:

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