Simple WP Menu Customization to make your Article Groups Clear

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.

This “start here” menu is becoming too long, especially if you show Google Ads, menus can run out of room!

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

To create the group, in the WP Dashboard / Appearance for “MENU”: simply drag the blogging articles to the right, they will click into place. Make a custom link “BLOGGING” and its URL can be anything – I used the first article in the list with URL “/make-money-blogging”
Now the “start here” menu item is much shorter and its sub-menu shows on hover

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

The Additional CSS panel in the Theme customization menu

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.

Hold the cursor over the item, in this case, “BLOGGING”
When you right-click the mouse, this menu opens, click “Inspect” to highlight the code

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.

Copy this, ( changing your own item ID of course ) and click SAVE. NOTE last line: #ffff00 is yellow text

Browse to the menu again ( refresh ) and the menu item should now be RED

Perfect now nobody is going to miss the group of blogging articles
When you scroll down to “BLOGGING” the background changes to black ( #000000 ) and the text to yellow, the group appears to the side

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

Additional CSS in Theme for 2 menu items next to each other
Rounded menu items with very distinct Red and YellowGreen backgrounds.

Perfect – the two items stand out, but are distinguishable as separate items.

More Tips Tricks and Tutorials for building your site

TuitionByAndrew