How to Customize WordPress Menus
The theme you have chosen to represent your site usually has controls in the WordPress customizer that allow you to design the main menu and header to your liking. But sometimes these controls don’t provide everything you need to really make your menu stand out.
Here are some stand-alone tips and tricks to make your main menu look impressive.
Displaying your menu in a traditional drop-down format is a built-in feature with WordPress. Almost every theme will comply with the dropdown feature, allowing you to provide your end users with an easy to understand navigation system that helps them find what they are looking for quickly.
In the WordPress backend under Appearance > Menus, you can add selected pages from the left to your main menu on the right. To display the selected pages in the drop-down list below another selected page, simply move the page by dragging and dropping it slightly to the right below the selected item.
You can deepen your drop-down list even further by adding another item in the first drop-down list and indenting the item to increase the hierarchy. The above example would look like this on the live site:
Hovering over Resources will drop down to the next group of menu items, and hovering over the first will bring up the next group of items on the left.
**Note: How your dropdown menu looks depends on the theme.**
Adding Font Awesome icons to your menu is easy to do and makes your menu stand out!
First, download and activate the Shortcode in Menus plugin in your plugin manager.
Then download and activate the Font Awesome plugin.
Now it’s time to search for the icons you want to appear in your menu. Go to the Font Awesome website and search for an appropriate icon.
Click on the icon you like and make a note of its name. Now, back in your menu settings, add the icon shortcode from the Font Awesome plugin to the navigation label for any menu item.
You can add a shortcode before or after the menu item name. Replace the code below with your page name and icon name.
[icon name=”your-icon-name-here”] About
Don’t forget to save!
The fixed menu sticks to the top of the page when the end user scrolls. This keeps navigation within reach of the user. Many themes will offer a fixed header option, but in case that option is not available, you can make your menu fixed with some custom CSS.
In your dashboard, go to Appearance > Customize. Click “Additional CSS” and add the following code:
#main-menu {
z-index:199;
margin:0 auto;
border-bottom:1px solid #000000;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
}Replace #main-menu with the navigation menu CSS class, which will be different depending on your theme. You can find the class by hovering over your menu and right-clicking “Inspect”.
If you don’t want to deal with CSS, you can simply install the My Sticky Menu plugin for an easy plug-and-play option to create sticky menus.
The most common example of this is showing the Login and/or Join Now tab in the menu for non-logged-in users and the Logout tab for logged-in users while any Login or Join Now tabs are disabled. hidden for logged in users -in users.
In the Plugin Manager of the dashboard, download and activate the User Menu – Show navigation menu.
Back in your menu settings, you can create Login, Join Now, and Sign Out buttons. You can have a separate page for users to log in and join. For the Log Out Button, create a menu item using the “Custom Link” selection.
Common WordPress logout links to add are:
http://yourdomain.com/wp-login.php?action=logoutMake sure you use the correct domain name and http version (http vs https).
Once you’ve created these tabs, you can hide or show them based on the user’s state. Under “Who can see this link?” select Users who are signed in or out.
Membership sites can hide or show menu items based on the user’s role for more visibility options.
Add hover effect
Hover effects can change menu item tab text or background color – or both! All you need to do is add some custom css in Appearance > Customize > Custom CSS. Here is an example:
#main-menu li.menu-item a:hover { background-color:#ffe6f2; color:#cc0066; border-radius:5px; border: 1px solid #cc0066; padding-top: 20px; padding-bottom: 20px; padding-right: 10px; padding-left: 10px; Margin-bottom: 10px; }Replace #main-menu with the navigation menu CSS class, which will be different depending on your theme. You can find the class by hovering over your menu and right-clicking “Inspect”.
The above example will produce this hover effect when hovering over the Portfolio tab.
You can easily create custom CSS for a menu item by assigning the menu item a CSS class. In the menu settings, click on Screen Options at the top right of the screen.
Checking the box for CSS Class is unchecked by default. Then save the menu settings.
There will now be a new text box below each menu item. Here you can specify a different CSS class for each menu item. In this example, we have added the class “service menu” to the menu item “Services”.
You can now add your custom CSS under Appearance > Customizations > Custom CSS. I can use the same CSS above using this class.
**Note: You will not need extra li.menu-item as the identifier because you specified an individual class.**
.services_menu a:hover {
background-color:#ffe6f2;
color:#cc0066;
border-radius:5px;
border: 1px solid #cc0066;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 10px;
padding-left: 10px;
Margin-bottom: 10px;
}This produces the same result as above, but only for this menu item.
Final thoughts
We hope you enjoyed this compilation of unique tips and tricks to customize your WordPress menu. Have you tried some of these ideas? Do you have another favorite trick you’d like to use? Let us know in the comments below!
Last, English 6 sent you details about the topic “How to Customize WordPress Menus❤️️”.Hope with useful information that the article “How to Customize WordPress Menus” It will help readers to be more interested in “How to Customize WordPress Menus [ ❤️️❤️️ ]”.
Posts “How to Customize WordPress Menus” posted by on 2020-10-21 01:18:44. Thank you for reading the article at English6.net
