WordPress’s standard menu is actually quite versatile, but when you have over 50 or so articles, you start to see the menu become confusing. Here’s how to customize your standard menu system.
When I looked into making it better, several WP plugins were suggested. But too many plugins mean extra code and slower load times.
Help your readers without adding any plugins, with this simple CSS customization to make your groups of articles stand out in the main menu and easy to see.
Ideally, I would like to add a Marker into the menu, to act as a sub-title, which would point to a group of articles. This makes it plain that the articles are together in interest and theme. For this example, I used the 4 articles about blogging
So now the sub-menu function is there but apart from the small right arrowhead symbol “>” your readers might well miss it altogether.
I wanted the marker to stand out with a simple change of background color and round the corners of the marker a little.
How to add custom CSS to change the color of the background and add the rounded corners
In the menu customization for my theme “Generate Press”, there is a panel to add any CSS to a page. All you have to know is the items ID within the page, to be able to do the changes
First, we need to find the ID of the menu item by using the Chrome browser’s “view page source”. Other browsers have similar functions.
You can see, from the line above the highlighted link, the text “menu-item-2806” this is our ID, now we can add the following CSS code which ONLY applies to this item ID.
Browse to the menu again ( refresh ) and the menu item should now be RED
How to Add two menu items next to each other
The example below shows the “resources” sub-menu, if I had chosen RED for both items “IMAGE & GRAPHICS EDITING” and the next one “TOOLS” they would not be visible as two separate items, so I chose “yellow-green” for the second “TOOLS” item
Perfect – the two items stand out, but are distinguishable as separate items.
More Tips Tricks and Tutorials for building your site