<?php wp_nav_menu(); ?>您的无序列表将具有类名称“menu”,每个列表项都有自己的CSS类。 如果您只有一个菜单位置,这可能会有效。但是,大多数主题都有多个位置,您可以在其中显示导航菜单。 仅使用默认CSS类可能会导致与其他位置的菜单冲突。 这就是您需要定义CSS类和菜单位置的原因。有可能你的WordPress主题已经通过使用如下代码添加导航菜单来做到这一点:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'primary-menu', ) ); ?>此代码告诉WordPress,这是主题显示主菜单的位置。它还在导航菜单中添加了CSS类主菜单。 现在,您可以使用此CSS结构设置导航菜单的样式。
// container class #header .primary-menu{} // container class first unordered list #header .primary-menu ul {} //unordered list within an unordered list #header .primary-menu ul ul {} // each navigation item #header .primary-menu li {} // each navigation item anchor #header .primary-menu li a {} // unordered list if there is drop down items #header .primary-menu li ul {} // each drop down navigation item #header .primary-menu li li {} // each drap down navigation item anchor #header .primary-menu li li a {}您需要将#header替换为导航菜单使用的容器CSS类。 此结构将帮助您完全更改导航菜单的外观。 但是,还有其他WordPress生成的CSS类自动添加到每个菜单和菜单项。这些类允许您进一步自定义导航菜单。
// Class for Current Page .current_page_item{} // Class for Current Category .current-cat{} // Class for any other current Menu Item .current-menu-item{} // Class for a Category .menu-item-type-taxonomy{} // Class for Post types .menu-item-type-post_type{} // Class for any custom links .menu-item-type-custom{} // Class for the home Link .menu-item-home{}WordPress还允许您将自己的自定义CSS类添加到单个菜单项。 您可以使用此功能设置菜单项的样式,例如在菜单中添加图像图标或仅更改颜色以突出显示菜单项。 转到WordPress管理员的外观»菜单页面,然后单击屏幕选项按钮。 选中该框后,您将看到在编辑每个菜单项时添加了一个附加字段。 现在,您可以在样式表中使用此CSS类来添加自定义CSS。它只会影响您添加的CSS类的菜单项。
#top-menu li.menu-item a { color:#ff0000; }在此示例中,#top-menu是分配给显示导航菜单的无序列表的ID。您需要使用检查工具来查找主题使用的ID。
.navigation-top { background-color:#000; }以下是我们的演示网站上的内容。
.contact-us { background-color: #ff0099; border-radius:5px; }以下是我们测试网站的外观。
#top-menu li.menu-item a:hover { background-color:#fff; color:#666; border-radius:5px; }在此示例中,#top-menu是主题用于无序导航菜单列表的CSS ID。 以下是我们测试网站上的内容。
#top-menu { background:#2194af; height:60px; z-index:170; margin:0 auto; border-bottom:1px solid #dadada; width:100%; position:fixed; top:0; left:0; right:0; text-align: right; padding-right:30px }只需将#top-menu替换为导航菜单的CSS ID即可。 以下是我们的演示中的内容: 有关更详细的说明和替代方法,请参阅我们的指南,了解如何在WordPress中创建粘滞浮动导航菜单。
#site-navigation { background-color:transparent; }这就是它在我们的演示网站上的样子。 根据您的主题,您可能需要调整标题图像的位置,使其覆盖透明菜单后面的区域。 我们希望本文能帮助您学习如何设置WordPress导航菜单的样式。您可能还希望查看有关如何添加移动设备响应式WordPress菜单的指南。
发现、改变
探知、求新
共享,感恩一路相伴
昱远品牌形象已完成全面升级
点击访问新官网