WordPress 主导航 - 分成两行？

Question

试图让主导航像这样位于两行（第二行有彩色背景：menu mockup

想法？我能够通过在菜单结构中放置 /ul ul 标签（在菜单项的末尾，这是顶行中的最后一个）来拆分两行，但仍在尝试弄清楚如何自定义颜色该背景/字体，并且不修改 very top of the page.

处的当前菜单

TIA！

<header id="main-header" data-height-onload="147" data-height-loaded="true" data-fixed-height-onload="117" style="top: 63px;">
            <div class="container clearfix et_menu_container">
                            <div class="logo_container">
                    <span class="logo_helper"></span>
                    <a href="https://dev.discoverstmargaretsbay.com/">
                        <img src="https://dev.discoverstmargaretsbay.com/wp-content/uploads/2018/10/SMBWEBMAIN.png" alt="Discover St. Margarets Bay" id="logo" data-height-percentage="54" data-actual-width="703" data-actual-height="150">
                    </a>
                </div>
                            <div id="et-top-navigation" data-height="66" data-fixed-height="40">
                                            <nav id="top-menu-nav">
                        <ul id="top-menu" class="nav gd-menu-z"><li id="menu-item-1742" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-1742"><a href="https://dev.discoverstmargaretsbay.com/">Home</a></li>
<li id="menu-item-1379" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1379"><a href="https://dev.discoverstmargaretsbay.com/explore-the-bay/">Explore the Bay</a></li>
<li id="menu-item-1381" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1365 current_page_item menu-item-1381" aria-current="true"><a href="https://dev.discoverstmargaretsbay.com/family-living/">Family Living</a><span class="screen-reader-text">(current)</span><span class="screen-reader-text">(current)</span></li>
<li id="menu-item-1380" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1380"><a href="https://dev.discoverstmargaretsbay.com/shop-local/">Shop Local</a></li>
<li id="menu-item-1382" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1382"><a href="https://dev.discoverstmargaretsbay.com/contact-us/">Learn More</a></li>
<li id="menu-item-1643" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1643"><a href="https://dev.discoverstmargaretsbay.com/events-calendar/">Events Calendar</a></li>
<li id="menu-item-1644" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1644"><a href="https://dev.discoverstmargaretsbay.com/the-directory/">Services Directory</a></li>
<li id="menu-item-1670" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1670"><a href="https://dev.discoverstmargaretsbay.com/community-forums/">Community Forums</a></li>
</ul>                       </nav>

Answer 1

您是否将它们放在两个不同的 div 中？相互编辑可能是更好的方法。

或者你可以做 ul:nth-child(even){background-color:blue}

显示您的 HTMl 可能会更容易。

Answer 2

我已经浏览过您的网站和代码。您的代码导致问题，因此最好为徽标和菜单区域考虑两个不同的 "div"。通过这样做，您可以相应地编辑菜单区域，然后创建 2 "ul"。

你可以访问我的博客得到你的答案：Online IN World。这是我建议将事物分成两个 dvis

的代码

<div class=”container logo_sec”>
<!– Logo Area or Header Area which includes logo and top bar with contact info –>
LOGO Section
</div>
<div class=”container-fluid”>
<div class=”row”>
<ul class=”main_header_1″>
<li><a href=”#”> Menu 1 </a></li>
<li><a href=”#”> Menu 2 </a></li>
<li><a href=”#”> Menu 3 </a></li>
<li><a href=”#”> Menu 4 </a></li>
<li><a href=”#”> Menu 5 </a></li>
</ul>
</div>
<div class=”row”>
<ul class=”main_header_2″>
<li><a href=”#”> Menu 1 </a></li>
<li><a href=”#”> Menu 2 </a></li>
<li><a href=”#”> Menu 3 </a></li>
</ul>
</div>
</div>

这里是 CSS

/* CSS goes here */
body
{
margin: 0;
}
.logo_sec
{
text-align: center;
font-size: 40px;
}
.main_header_1
{
background-color: #ffffff;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.main_header_1 li,
.main_header_2 li
{
display: inline-block;
padding: 15px;
}
.main_header_1 li a
{
color: #333333;
}
.main_header_1 li a,
.main_header_2 li a
{
text-decoration: none;
font-size: 18px;
}
.main_header_2
{
background-color: darkblue;
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.main_header_2 li a
{
color: #ffffff;
}

所以你会得到这样的输出，因为我已经提到了将菜单分成 2 行的代码。

Check this image for output

谢谢。

WordPress 主导航 - 分成两行？

WordPress main navigation - split into two rows?

html

css

wordpress

navigationbar