(This is part of the Atahualpa Tutorial for Beginners series)
For this tutorial, I will talk about customizing the navigation menus. As of current design, there are 2 navigation menus, a page menu (above the header image) and a category menu (below the header image). Both of these menus can be easily styled to make them more appealing.
Let’s start with styling the page menu.
i. Styling the Page Menu
For page menu, I would like to show you how to remove the border, bold and underline the links, and create more space between each option.
1. Go to Appearance > Atahualpa Theme Options.
2. Click the MENU1 (Page Menu) option.
3. Remove the dashed border by deleting the code in the Border around all menu items box.
4. Configure FFFFFF (hex color code) in the Background color: Hover box. This will remove any effect when the mouse cursor pointing to the option.
5. Configure FFFFFF in the Background color: Parent box.
6. Change the font size to 14 in the Font Size & Face box.
7. Configure 000000 in the Link Color box to change the link color to black.
8. Configure color value 000000 in the Link Color: Hover box to remove any effect when the mouse cursor pointing to the links.
9. Select capitalize from the Transform text in Page Menu Bar drop-down list.
10. Click the Save changes button.
The MENU 1 (Page Menu) configuration page actually has limited options when it comes to styling the menu.
You will need to configure the CSS code in the Add HTML/CSS Inserts section for a more advanced styling.
For our tutorial, we need to configure the CSS to underline and make the options further apart.
1. Go to Appearance > Atahualpa Theme Options.
2. Click the Add HTML/CSS Inserts option.
3. In the CSS Inserts box, copy and paste the below CSS code right after the last line of existing codes.
/* Bold, increase padding and underline the links */
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:visited,
div#menu1 ul.rMenu li a:active {
font-weight: bold;
text-decoration: underline;
padding: 6px 12px; /* 6px top/bottom, 12px left/right padding */
}
4. Click the Save changes button.
ii. Styling the Category Menu
For the category menu, I will style it to make a long sky blue, #0179C1 bar. The links will be underlined for “mouseover” event.
Like the page menu, we will adjust the padding for category menu.
1. Go to Appearance > Atahualpa Theme Options.
2. Click the MENU 2 (Category Menu) option.
3. Change the color value in Border around all menu items box to 0179C1.
4. Configure 0179C1 in Background color box.
5. Configure 0179C1 in Background color:Hover box.
6. Configure 0179C1 in Background color : Parent box.
7. Change to a larger link font by putting 15px in Font for Category Menu Bar box.
8. Select lowercase from the Transform text in Category Menu Bar drop-down list.
9. Click the Save changes button.
Follow the steps below to bold the links, increase the spacing and create the hover effect of underlining the links.
1. Go to Appearance > Atahualpa Theme Options.
2. Click the Add HTML/CSS Inserts option.
3. In the CSS Inserts box, copy and paste the code below right after the last line of existing configuration to bold the links.
/* Bold and increase padding*/
div#menu2 ul.rMenu li a:link,
div#menu2 ul.rMenu li a:hover,
div#menu2 ul.rMenu li a:visited,
div#menu2 ul.rMenu li a:active { font-weight: bold;
padding: 6px 12px; /* 4px top/bottom, 10px left/right padding */
}
4. In the CSS Inserts box, copy and paste the code below right after the last line of existing configuration to create the link underline effect upon mouse pointing.
/*Underline the links when mouse pointing*/
div#menu2 ul.rMenu li a:hover {
text-decoration: underline;
}
5. Click the Save changes button.
Alright, this is the end of Atahualpa Part 6 tutorial. Before you move on to Part 7, browse the homepage to check the changes we have done.
(This is part of the Atahualpa Tutorial for Beginners series)