Styling the navigation bar on your WordPress website is necessary because it is the menu through which the visitor will visit all your website. Changing the color or the design will give a new look to your website. By customizing your theme using CSS, you can easily change the appearance and give a new style to it.
There are two methods that you can use to style your WordPress site, you can choose any as per your knowledge. Both of the methods are discussed below:
1. Use of a plugin to style the navigation menu:
Are you a beginner? having no knowledge of CSS and don’t know how to customize the themes to add any new designing or any style. Don’t worry solution to your problem is here. All your worries can be solved with a plugin called “CSS hero” using this, you can easily style your navigation bar.
Let’s see how you will do it:
The process will be initiated after you install and activate the CSS Hero plugin in your WordPress. And then you have to get the license key for CSS Hero. There is no code required for either HTML or CSS to style your WordPress theme if you are using this plugin.
After you complete the setup of the plugin, then click on the CSS Hero option on the top of the screen in admin toolbar of WordPress.
After clicking on that button, CSS toolbar will display on your website’s right side, from where you have to click on the top blue button in the toolbar.
Now, when you will move your mouse to the navigation bar, the navigation menu will be highlighted and when you will click on it, the things you can edit will be shown.
If you want to alter any of the elements in the text, background, margin, padding, size, position etc, you can simply click on the navigation-top option.
Let’s assume that you have to change the background color of the navigation menu. Click on Navigation-top, there will be all different entities options. Now you have to click on the “background”, and a simple interface will be displayed where you can make your changes in the background. You can select the color, image, and gradient for the background.
You can see the preview of the changes you have made. If you are satisfied, then click on save button to save the changes.
Using this plugin, you don’t have to worry if you want your old design or style at any time as “CSS Hero” save all the history of your changes that you can use at any time.
2. Manually design WordPress navigation:
This method allows you to add custom CSS to give any style to your theme. So obviously, a good knowledge of CSS is required to implement this method.
WordPress navigation menu displays an unordered list. Use of simple WordPress menu tag will not display CSS.
If you use the default CSS in your designing then some problem may occur with the menus displays at other locations as most of the themes have various locations to display the navigation menu.
Now the question is what is the correct method to add CSS? You have to define the CSS class and different locations to solve the problem. Below are the steps which you have to follow to do it correctly:
Maybe your WordPress theme already has the code in it which defines the CSS classes and locations on which they are displaying on your website. Below is the code which is used to tell the WordPress that here is the theme displays primary menu displays and adds the CSS class primary menu to the navigation. Look for the code if it already exists or add it immediately.
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
You can now add CSS and edit your navigation menu to make it look like you want it to be.
// 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 {}
Replace the #header with container CSS class that is used by your navigation menu. Using this structure, you can make any changes to your navigation menu and change the appearance of it.
You can customize the navigation menu further, as WordPress generated classes that are added to each menu and menu item allows to do more editing.
// 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{}
You also have the option to add different CSS classes to different menu items, which allows you to add icons to menus or highlight the menus etc.
By going on Appearance>> Menus in your WordPress admin and click on “screen options”.
After checking the “CSS classes”, an additional will be added when you edit each menu item option.
Now you can use your CSS classes to edit the appearance of the navigation menu.
Here are how some of the editing you can make to your navigation menu:
• changing font color:
#top-menu li.menu-item a {
color:#ff0000;
}
Using above code, you can make changes to your navigation menu just by adding it to the theme. “#top-menu” is the id assigned to the unordered list on the navigation menu.
• Changing background color:
Get your CSS id or class used by your theme for the container surrounding navigation menu.
Now, you can use the below code to change the navigation menu’s background color.
.navigation-top {
background-color:#000;
}
• Changing background color of the single menu item:
To make some of the things highlighted, you may like to change the background color for that particular portion. Some people may like to highlight the login, sign up, contact us or help sections on their navigation menu.
So in that case, you can add a custom class to the menu item that you want to highlight by changing its background color.
Just go to Appearance>>Menus and click on “screen options”.
After checking the “CSS class option, then scroll below to make changes in the menu-item. Click on expand it and then add the CSS class you want to add and use the below code to give a color to the background of a particular menu-item according to your need.
.contact-us {
background-color: #ff0099;
border-radius:5px;
}
• Making the navigation menu transparent:
If you want your navigation menu to be transparent so that the menu-items look like merging in the background, you can do it using the below code:
#site-navigation {
background-color:transparent;
}
This article will surely help you if you are looking to style your navigation menu. Just try the method you want to and make your navigation menu look different and beautiful.
