How To Add a Custom WordPress Menu to Your Header

DearBlogger Exclusive Hosting Deal

We get a lot of questions about how to setup a custom WordPress menu. Of course, any beginner tutorial will explain how to replace the default WordPress menu – usually just a menu including sample page and home – with a menu you actually name and create in Appearance > Menus.

However, what if you want to create a custom WordPress menu that goes in some white space outside of your theme’s designated menu locations?

This post will show you how.

Quick Guide

We’ve been focusing on SEO more and more lately along with user experience. Let’s see if Google’s snippets this answer:

The recipe to create a custom WordPress menu is to start with your best few links. You can get any number of them for your menu but three links is a good size. Make an unordered list in a new WordPress post (using the ul and li tags). Now wrap the list in a div class and name it. That’s your HTML. Now write some CSS. Tell the div class to float right and the class li to display inline. The rest is simply margin, padding, fonts etc. Place your HTML near the top of your header.php file and CSS in your custom CSS window. Test locations of your HTML for best results. This method will cost you nothing and can change your site’s functionality so vs web developer it’s quite valuable to learn how to DIY. Good job!

The above Google friendly snippet will obviously teach you how to create a custom WordPress menu. For more detailed explanations, please continue!

Why Create a Custom WordPress Menu?

The ability to create a custom WordPress menu is a good skill to have.

For example, as you create a website for a client, they may request certain features inside the menu like a call to action button or social icons. It is very difficult to add a button or social icons to a default WordPress menu.

So, you would want to know how to recreate the text link parts of a menu and put them wherever you want.

That’s just one example of many out there.

Part 1: Custom WordPress Menu HTML

So the menu we make will be very simple, even more simple than WordPress themes setup a menun because those generally involve PHP.

We will just use HTML and CSS.

The HTML of your new menu should take the form of a unordered list, denoted by the “ul” tag in your new post editor.

In fact, the new post editor is a great place to create your menu! Head there, and write out the following:

1. a div class named whatever you’d like
2. a ul
3. as many li’s including a’s inside them
4. then close off each tag

So, for us it will look something like this:

<div class="custom-menu">
			<ul>
				<li><a href="https://www.dearblogger.org">Home</a></li> 
				<li><a href="https://www.dearblogger.org/blogger-or-wordpress-better">Best Blog Platforms</a></li>
				<li><a href="https://www.dearblogger.org/wordpress-blog-with-hostgator-hosting">Create a Blog</a></li>
				<li><a href="https://www.youtube.com/user/narayguy">Videos</a></li>
				<li><a href="https://www.dearblogger.org/authors/">Authors</a></li>
				<li><a href="https://www.dearblogger.org/author/greg">About</a></li>
				
			</ul>
		</div>

You’ll need to insert this HTML is your theme’s header.php file, ideally inside the body tag right after your theme’s #masthead tag or somewhere after the site branding area. This part will surely require some playing around, so make sure to make a backup of your header.php file before making any edits.

Pretty simple, then once your menu is up you will replace the a href’s with actual links.

Part 2: Custom WordPress Menu CSS

Now for the CSS styling.

Our menu needs the following:

1. Margin around it
2 A float direction
3. A list style type
4. A display command (which makes the menu go horizontally)
5. Padding inside the menu
6. Color
7. Text decoration (to remove decoration from the theme if needed)
8. Font
9. Font size

So, here you have all the basic CSS you would need:

.roguemenu {
 margin: 0.5em 3em 0 0;
 float: right;
}

.roguemenu ul {
  list-style-type: none;
}

.roguemenu li {
  display: inline;
  padding: 0 1em 0 0;
}

.roguemenu li a {
  color: #000;
  text-decoration: none;
  font-family: ‘proxima-nova’, Helvetica, Arial, sans-serif;
  font-size: 1em;
}

So there you have it! Just make sure to paste this CSS into your custom CSS window inside your theme, or inside a plugin which provides a CSS window like Site Origin CSS if you need it.

Other Ways to Create a Custom WordPress Menu

Our video library contains a least a few more ways to setup a custom WordPress menu, so we figured we’d share them below:

Create a Simple Menu in Elementor (also works in any other theme)

Change Menu Link Color

Increase Menu Item Font Size

How to Put a Home Link in the WordPress Nav Menu

Final Thoughts to Create Your Custom WordPress Menu

There are obviously a million ways to setup a custom WordPress menu when you factor in fonts, colors and of course where you put the darn thing!

What sort of menu are you trying to create? Can we help you with the styling or general HTML/CSS? Let us know in the comments!

Share This Post

Post Comment