Do you want to style your WordPress navigation menus to change their colors or appearance? While your WordPress theme handles the appearance of your navigation menus, you can easily customize it using CSS to meet your requirements. In this article, we will show you how to style the WordPress navigation menus on your site.
您是否要设置WordPress导航菜单的样式以更改其颜色或外观？ 当您的WordPress主题处理导航菜单的外观时，您可以轻松地使用CSS对其进行自定义以满足您的要求。 在本文中，我们将向您展示如何在您的站点上设置WordPress导航菜单的样式。
We will be showing two different methods. The first method is for beginners because it uses a plugin and does not require any code knowledge. The second method is for intermediate DIY users who prefer to use CSS code instead of a plugin.
我们将展示两种不同的方法。 第一种方法是针对初学者的，因为它使用插件并且不需要任何代码知识。 第二种方法是针对喜欢使用CSS代码而不是插件的中级DIY用户。
方法1：使用插件设置WordPress导航菜单的样式 (Method 1: Styling WordPress Navigation Menus Using a Plugin)
Your WordPress theme uses CSS to style navigation menus. Many beginners are not comfortable with editing theme files or writing CSS code on their own.
您的WordPress主题使用CSS设置导航菜单的样式。 许多初学者不满意自己编辑主题文件或编写CSS代码。
That’s when a WordPress styling plugin comes in handy. It saves you from editing theme files or writing any code.
那时WordPress样式插件就派上用场了。 它使您免于编辑主题文件或编写任何代码的麻烦。
First you need to do is install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.
首先，您需要安装并激活CSS Hero插件。 有关更多详细信息，请参阅有关如何安装WordPress插件的分步指南。
CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.
CSS Hero是一个高级WordPress插件，可让您设计自己的WordPress主题而无需编写任何代码(无需HTML或CSS)。 请参阅我们的CSS Hero评论以了解更多信息。
WPBeginner users can use use this CSS Hero Coupon to get 34% discount on their purchase.
WPBeginner用户可以使用此CSS Hero优惠券在购买时获得34％的折扣。
Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.
激活后，您将被重定向以获取CSS Hero License密钥。 只需按照屏幕上的说明进行操作，然后单击几下即可将您重定向到您的站点。
Next, you need to click on the CSS Hero button in your WordPress admin toolbar.
接下来，您需要在WordPress管理工具栏中单击CSS Hero按钮。
CSS Hero offers a WYSIWYG (What you see is what you get) editor. Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen.
CSS Hero提供了所见即所得(所见即所得)编辑器。 单击该按钮将带您到您的网站，并在屏幕上显示浮动CSS Hero工具栏。
You need to click on the blue icon at the top to start editing.
您需要单击顶部的蓝色图标以开始编辑。
After you click the blue icon, take your mouse to your navigation menu, and CSS Hero will highlight it by showing the borders around it. When you click on the highlighted navigation menu, it will show you the items that you can edit.
单击蓝色图标后，将鼠标移至导航菜单，CSS Hero将通过显示其周围的边框来突出显示它。 当您单击突出显示的导航菜单时，它将显示您可以编辑的项目。
In the screenshot above, it shows us top navigation menu container. Let’s assume we want to change the background color of our navigation menu. In that case, we will select top navigation which affects our entire menu.
在上面的屏幕截图中，它向我们展示了顶部导航菜单容器。 假设我们要更改导航菜单的背景颜色。 在这种情况下，我们将选择影响整个菜单的顶部导航。
CSS Hero will now show you different properties that you can edit like text, background, border, margins, padding, etc.
CSS Hero现在将向您显示可以编辑的不同属性，例如文本，背景，边框，边距，填充等。
You can click any property that you want to change. CSS Hero will show you a simple interface where you can make your changes.
您可以单击任何要更改的属性。 CSS Hero将为您显示一个简单的界面，您可以在其中进行更改。
In the screenshot above, we selected background, and it showed us a nice interface to select background color, gradient, image, and more.
在上面的屏幕截图中，我们选择了背景，它向我们展示了一个不错的界面，可以选择背景颜色，渐变，图像等。
As you make changes, you will be able to see them live in the theme preview.
进行更改时，您将能够在主题预览中实时看到它们。
Once you are satisfied with the changes, click on the save button in CSS Hero toolbar to save your changes.
对更改满意后，单击CSS Hero工具栏中的保存按钮以保存更改。
The best thing about using this method is that you can easily undo any changes that you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.
使用此方法的最好之处在于，您可以轻松撤消所做的任何更改。 CSS Hero会保留所有更改的完整历史记录，您可以在这些更改之间来回切换。
方法2：手动设置WordPress导航菜单样式 (Method 2: Manually Style WordPress Navigation Menus)
This method requires you to manually add custom CSS and is meant for intermediate users.
此方法需要您手动添加自定义CSS，并且适用于中级用户。
WordPress navigation menus are displayed in an unordered list (bulleted list).
WordPress导航菜单显示在无序列表(项目列表)中。
Typically if you use the default WordPress menu tag, then it will display a list with no CSS classes associated with it.
通常，如果您使用默认的WordPress菜单标签，则它将显示一个列表，其中没有与之关联CSS类。
<?php wp_nav_menu(); ?>
Your unordered list would have the class name ‘menu’ with each list item having its own CSS class.
您的无序列表将具有类名“菜单”，并且每个列表项都有其自己CSS类。
This might work if you only have one menu location. However, most themes have multiple locations where you can display navigation menus.
如果您只有一个菜单位置，这可能会起作用。 但是，大多数主题在多个位置可以显示导航菜单。
Using only the default CSS class may cause conflict with menus on other locations.
仅使用默认CSS类可能会导致与其他位置的菜单发生冲突。
This is why you need to define CSS class and menu location as well. Chances are that your WordPress theme is already doing that by adding the navigation menus using a code like this:
这就是为什么您还需要定义CSS类和菜单位置的原因。 很有可能您的WordPress主题已经通过使用如下代码添加导航菜单来做到这一点：
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
This code tells WordPress that this is where the theme displays primary menu. It also adds a CSS class primary-menu to the navigation menu.
此代码告诉WordPress，这是主题显示主菜单的地方。 还将CSS类主菜单添加到导航菜单。
Now you can style your navigation menu using this CSS structure.
现在，您可以使用此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 {}
You will need to replace #header with the container CSS class used by your navigation menu.
您将需要用导航菜单使用的容器CSS类替换#header。
This structure will help you completely change the appearance of your navigation menu.
这种结构将帮助您完全更改导航菜单的外观。
However, there are other WordPress generated CSS classes automatically added to each menu and menu item. These classes allow you to customize your navigation menu even further.
但是，还有其他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 also allows you to add your own custom CSS classes to individual menu items.
WordPress还允许您将自己的自定义CSS类添加到各个菜单项。
You can use this feature to style menu items, like adding image icons with your menus or by just changing colors to highlight a menu item.
您可以使用此功能为菜单项设置样式，例如在菜单中添加图像图标，或仅更改颜色以突出显示菜单项。
Head over to Appearance » Menus page in your WordPress admin and click on the Screen Options button.
转至WordPress管理员中的“ 外观»菜单”页面，然后单击“ 屏幕选项”按钮。
Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.
选中该框后，您将看到在编辑每个菜单项时添加的其他字段。
Now you can use this CSS class in your stylesheet to add your custom CSS. It will only affect the menu item with the CSS class you added.
现在，您可以在样式表中使用此CSS类来添加自定义CSS。 它只会影响添加了CSS类的菜单项。
WordPress中导航菜单样式的示例 (Examples of Styling Navigation Menus in WordPress)
Different WordPress themes may use different styling options, CSS classes, and even JavaScript to create navigation menus. This gives you a lot of options to change those styles and customize your navigation menus to meet your own requirements.
不同的WordPress主题可以使用不同的样式选项，CSS类，甚至JavaScript来创建导航菜单。 这为您提供了很多选项来更改这些样式并自定义导航菜单以满足您自己的需求。
The inspect tool in your web browser will be your best friend when it comes to figuring out which CSS classes to change. If you haven’t used it before, then take a look at our guide on how to use inspect tool to customize WordPress themes.
在确定要更改哪些CSS类时，Web浏览器中的检查工具将是您最好的朋友。 如果您以前从未使用过它，请查看我们的指南， 了解如何使用检查工具来自定义WordPress主题 。
Basically, you just need to point the cursor to the element you want to modify, right click and then select Inspect tool from browser’s menu.
基本上，您只需要将光标指向要修改的元素，右键单击，然后从浏览器的菜单中选择“检查工具”。
That being said, let’s take a look at some real life examples of styling navigation menus in WordPress.
话虽如此，让我们看一下WordPress中样式化导航菜单的一些实际示例。
1.如何在WordPress导航菜单中更改字体颜色 (1. How to Change Font Color in WordPress Navigation Menus)
Here is the sample custom CSS that you can add to your theme to change font color of navigation menus.
这是示例自定义CSS，您可以将其添加到主题中以更改导航菜单的字体颜色。
#top-menu li.menu-item a {
color:#ff0000;
}
In this example, the #top-menu is the ID assigned to the unordered list that displays our navigation menu. You will need to use the inspect tool to find out the ID used by your theme.
在此示例中，＃top-menu是分配给显示我们的导航菜单的无序列表的ID。 您将需要使用检查工具找出主题所使用的ID。
2.如何更改导航菜单栏的背景颜色 (2. How to Change Background Color of Navigation Menu Bar)
First you’ll need to find out the CSS ID or class used by your theme for the container surrounding navigation menu.
首先，您需要找出主题所使用CSS ID或类，以用于围绕导航菜单的容器。
After that you can use the following custom CSS to change background color of navigation menu bar.
之后，您可以使用以下自定义CSS更改导航菜单栏的背景颜色。
.navigation-top {
background-color:#000;
}
Here is how it looked on our demo website.
这是在我们的演示网站上的外观。
3.如何更改单个菜单项的背景颜色 (3. How to Change Background Color of a Single Menu Item)
You may have noticed that many websites use a different background color for the most important links in their navigation menu. This link could be a login, sign up, contact, or buy button. By giving it a different color, it makes the link more noticeable.
您可能已经注意到，许多网站的导航菜单中最重要的链接使用不同的背景色。 该链接可以是登录，注册，联系或购买按钮。 通过给它提供不同的颜色，可以使链接更加引人注目。
To achieve this, we will add a custom CSS class to the menu item that we want highlight with a different background color.
为了实现这一点，我们将自定义CSS类添加到我们希望以不同背景色突出显示的菜单项。
Head over to Appearance » Menus and click on the Screen Options button at the top right corner of the screen. This will bring up a fly down menu where you need to check the box next to ‘CSS classes’ option.
转到外观»菜单 ，然后单击屏幕右上角的“屏幕选项”按钮。 这将弹出一个下拉菜单，您需要在其中选中“ CSS类”选项旁边的框。
After that you need to scroll down to the menu item that you want to modify and click to expand it. You will notice a new option to add your custom CSS class.
之后，您需要向下滚动到要修改的菜单项，然后单击以展开它。 您会注意到一个新选项来添加自定义CSS类。
Now you can use this CSS class to style that particular menu item differently.
现在，您可以使用此CSS类来为特定菜单项设置不同的样式。
.contact-us {
background-color: #ff0099;
border-radius:5px;
}
Here is how it looked on our test site.
这是我们测试站点上的外观。
4.将悬停效果添加到WordPress导航菜单 (4. Adding Hover Effects to WordPress Navigation Menus)
Do you want your menu items to change colors on mouse-over? This particular CSS trick makes your navigation menus look more interactive.
您是否希望菜单项在鼠标悬停时更改颜色？ 这个特殊CSS技巧使您的导航菜单看起来更具交互性。
Simply add the following custom CSS to your theme.
只需将以下自定义CSS添加到您的主题。
#top-menu li.menu-item a:hover {
background-color:#fff;
color:#666;
border-radius:5px;
}
In this example, #top-menu is the CSS ID used by your theme for the unordered navigation menu list.
在此示例中，＃top-menu是主题用于无序导航菜单列表CSS ID。
Here is how this looked on our test site.
这是在我们的测试站点上的外观。
5.在WordPress中创建粘性浮动导航菜单 (5. Create Sticky Floating Navigation Menus in WordPress)
Normally navigation menus appear on top and disappear as a user scrolls down. Sticky floating navigation menus stay on top as a user scrolls down.
通常，导航菜单显示在顶部，并在用户向下滚动时消失。 用户向下滚动时，粘性浮动导航菜单位于顶部。
You can add the following CSS code to your theme to make your navigation menus sticky.
您可以将以下CSS代码添加到主题中，以使导航菜单具有粘性。
#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
}
Simply replace #top-menu with the CSS ID of your navigation menu.
只需将＃top-menu替换为导航菜单CSS ID。
Here is how it looked in our demo:
这是在我们的演示中的外观：
For more detailed instructions and alternate method, see our guide on how to create a sticky floating navigation menu in WordPress.
有关更多详细说明和替代方法，请参见有关如何在WordPress中创建粘性浮动导航菜单的指南 。
6.在WordPress中创建透明的导航菜单 (6. Create Transparent Navigation Menus in WordPress)
Many websites use large or fullscreen background images with their call to action buttons. Using transparent menus makes your navigation blend in with the image. This makes users more likely to focus on your call to action.
许多网站将大型或全屏背景图片与号召性用语配合使用。 使用透明菜单可使您的导航与图像融合在一起。 这使用户更有可能专注于您的号召性用语。
Simply add the following sample CSS to your theme to make your navigation menus transparent.
只需将以下示例CSS添加到主题中，即可使导航菜单透明。
#site-navigation {
background-color:transparent;
}
This is how it looked on our demo site.
这就是在我们的演示站点上的外观。
Depending on your theme, you may need to adjust the position of the header image so that it covers the area behind your transparent menus.
根据您的主题，您可能需要调整标题图像的位置，使其覆盖透明菜单后面的区域。
We hope this article helped you learn how to style WordPress navigation menus. You may also want to see our guide on how to add mobile-ready responsive WordPress menu.
我们希望本文能帮助您学习如何设置WordPress导航菜单的样式。 您可能还希望查看我们的指南， 了解如何添加支持移动设备的WordPress菜单 。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。 您也可以在Twitter和Facebook上找到我们。
翻译自: https://www.wpbeginner/wp-themes/how-to-style-wordpress-navigation-menus/
更多推荐
如何设置WordPress导航菜单的样式
发布评论