Question

我试图将导航栏一直延伸到整个屏幕，但菜单项的开头水平保持相同 - 但黑色导航栏一直向左和向右延伸。目前我的导航栏就在中心

还尝试更改导航栏中菜单项的字体颜色，并添加其中一个只是放大镜的导航栏搜索

Answer 1

您正在寻找的html块如下：

<div class="clearfix container">
    <div class="site-branding">
            <a href="http://www.offtopicpolitics.com/" title="OffTopicPolitics">
                <img src="http://www.offtopicpolitics.com/wp-content/uploads/2015/12/offtoptest.png" alt="OffTopicPolitics">
            </a>                            
           <!-- .site-branding -->
    </div>          
    <nav id="main-navigation" class="main-navigation" role="navigation">
        <a href="#main-navigation" class="nav-open">Menu</a>
        <a href="#" class="nav-close">Close</a>
        <div class="clearfix sf-menu">
            <ul class="sf-js-enabled">
                <li class="current_page_item">
                    <a href="http://www.offtopicpolitics.com/">Home</a>
                </li>
                <li class="page_item page-item-7">
                    <a href="http://www.offtopicpolitics.com/contact/">Contact</a>
                </li>
            </ul>
        </div>
        <!-- #main-navigation --></nav>
    </div>
</div>

它不是100％宽度的原因是因为你的引导程序.container div的宽度只有980px。

要解决此问题，您可以将container更改为container-fluid，然后在您的css中将0填充应用于容器，如下所示：

.container-fluid {
    padding: 0;
}

这将使整个标题宽度跨越页面的100％。

如果您只希望导航栏宽度跨越页面的100％而不是整个页眉执行我上面建议的内容，而且还将您的.site-branding div包装在容器中，如下所示：

<div class="container">
    <div class="site-branding">
        <a href="http://www.offtopicpolitics.com/" title="OffTopicPolitics">
            <img src="http://www.offtopicpolitics.com/wp-content/uploads/2015/12/offtoptest.png" alt="OffTopicPolitics">
        </a>
    </div>
</div>

希望这可以帮助您解决当前的问题！

扩展导航栏

1 个答案: