Question

首先是链接：http://isotopethemes.com/extenso/header-10.html

HTML代码：

<header id="header-10">
    </div><!-- /.header-10-top -->
    <!-- MAIN NAVIGATION -->
    <div class="header-10-main">
        <div class="container">
            <div class="row">
                <div class="header-10-logo col-lg-3 col-md-3 col-sm-3">
                    <a href="#"><img src="img/logo.png" alt="Home 10 Main Logo"></a>
                </div><!-- /.header-10-logo -->
                <div class="header-10-nav col-lg-9 col-md-9 col-sm-9">
                    <nav class="navbar navbar-10 navigation-10" role="navigation">
                        <ul onClick="" class="zetta-menu zm-response-switch zm-effect-slide-top">
                            <li class="zm-active zm-content-full first">
                                <a href="#">
                                    Home
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Sliders
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Pages
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Portfolio
                                </a>
                            </li>
                            <li class="zm-content-full">
                                <a href="#">
                                    Elements
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    Blog
                                </a>
                            </li>
                            <li class="last">
                                <a href="#">
                                    Contact
                                </a>
                            </li>
                        </ul><!-- /.zetta-menu -->  
                    </nav><!-- /.navbar-10 -->
                </div><!-- /.header-10-nav -->
            </div><!-- /.row -->
        </div><!-- /.container -->
    </div><!-- /.header-10-main -->
</header><!-- /#header-10 -->

如果我删除'header-10-main'或'header-10-nav'，它可以解决问题。

对于1370px以下的任何分辨率，都有一个水平滚动条。我用检查员检查了所有元素，但没有一个超过身体。只有'overflow：hidden'可以工作，但是下拉列表不起作用。

任何帮助将不胜感激。

Answer 1

更改下方元素的宽度。

.zetta-menu .w-150 { 
   width: 140px; // Currently, width: 150px; 
}

更好如果您可以打开博客菜单的第二级下拉菜单[博客 - ＆gt;博客列表]在左侧。目前正在右侧开放，造成问题。

Bootstrap 3：Header创建水平滚动

1 个答案: