我正在尝试使用顶栏(基础)和 wp_nav_menu 制作菜单。我之前已经完成了它并且它工作正常,但这次我需要它是一个下拉菜单。
问题是它显示菜单下面的子菜单/下拉菜单元素,好像它是一个完全不同的菜单。我该如何解决这个问题?
我的代码
<nav class="top-bar" data-topbar role="navigation">
<ul class="title-area">
<li class="toggle-topbar menu-icon"><a href="#" ><span></span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<?php
wp_nav_menu( array('menu' => "Top Menu" ) );
?>
</ul>
<ul class="right" id="social-media">
<li><?php dynamic_sidebar( 'search-1' ); ?></li>
<li><a href="#"><img src=""></a> Social Media 1 </li>
<li><a href="#"><img src=""></a> Social Media 2 </li>
<li><a href="#"><img src=""></a> Social Media 3 </li>
</ul>
</section>
</nav>
当我有一个小/移动屏幕时,它也不会显示菜单图标。在此决议中,它根本不会改变为下拉模式。
编辑:
我弄清楚如何仅显示我的下拉菜单。我只需使用 walker 并设置我的菜单:
Parent 1
Child 1-1
Child 1-2
Child 1-3
Parent 2
Child 2-1
Child 2-2
Child 2-3
但我的菜单项仍有问题。我的菜单图标不会隐藏在媒介中,我的父母不会躲在小的地方。
新wp_nav_menu:
wp_nav_menu( array(
'theme_location' => 'main',
'menu' => 'Top Menu',
'container' => false,
'depth' => 0,
'items_wrap' => '<ul class="left">%3$s</ul>',
'walker' => new reverie_walker( array(
'in_top_bar' => true,
'item_type' => 'li',
'menu_type' => 'main-menu'
) )
) );
CSS:
#navigation-menu {
background-color: $primary-color;
h2 {
display: none;
}
nav {
li{
display: inline-block;
}
}
.top-bar-section {
.left{
li {
float: none;
}
}
.divider {
width: 0%;
}
.dropdown:hover {
background-color: $white !important;
color: $primary-color !important;
}
.dropdown {
.parent-link {
display: none;
}
:active {
background-color: $white !important;
color: $primary-color !important;
}
}
#social-media-top {
margin-right: rem-calc(10);
margin-left: rem-calc(-30);
padding-left: rem-calc(0);
li {
margin-right: rem-calc(-15);
}
#searchform {
margin-top: rem-calc(-5);
margin-bottom: rem-calc(5);
#searchvalue {
display: inline;
margin-left: rem-calc(-40);
opacity: 0.6;
}
#searchsubmit {
margin-bottom: rem-calc(-15);
width: rem-calc(25);
height: rem-calc(40);
}
}
.social-top {
width: rem-calc(60);
height: rem-calc(45);
img {
opacity: 0.6;
}
:hover {
opacity: 1;
background-color: $primary-color !important;
}
}
}
}
}