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}

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

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;
}

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

Check this image for output

谢谢。

WordPress主导航-分为两行吗？

2 个答案: