In this video we’re diving into how to build clean, responsive menus, headers, and footers in WordPress—using tools you already have. No extra plugins. Just smart design.
In this step-by-step tutorial, we’ll walk you through creating a polished and functional navigation menu, customizing your header for branding impact, and designing a footer that builds trust and increases conversions. Whether you’re using Astra, Kadence, or GeneratePress, you’ll learn how to make your site mobile-friendly, SEO-ready, and visually consistent.
By the end of this video, you’ll know:
How to create dropdowns and mobile menus
Why headers matter more than just a logo
What to actually put in your footer
How to keep everything looking great on all screen sizes
Perfect for WordPress beginners, small business owners, and bloggers who want to build credibility fast.
00:00 Introduction
00:24 How to Create a Menu in WordPress
02:26 Styling the Menu via the Customizer
05:21 Using the Header Builder
07:16 Building a Trustworthy Footer
Top Resources
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
Think about the last time you visited a Site and couldn't find the menu or the Footer was just copyright text and Nothing else. Menus guide your visitors. Headers shape your first impression. And Footers, believe it or not, help build Trust. Today, we're going to break down How to build a great menu, header, and Footer, all using WordPress tools you Already have. So, let's start with the Menu. From your WordPress dashboard, go To Appearance. Hover over that and then Click on menu. And now that's going to Bring you to the menu screen right here. And you may already have a menu on your Site like I have. Mine is called primary Menu, but I am going to create another One for this example. So I'm going to Click on the create a new menu link up Here. And now we've got a new menu ready To add in all the things that we want. The first thing we need to do is now Name your menu. Pick something like main Menu which Works and then click create menu. Then You can start adding your most important Pages. So click view all and then add Things like the home, the blog, the About us, contact, and if you've got a Shop, add that too. Then click add to Menu. That's going to add those items to Your menu. And now you can use the drag And drop function within the menu editor
To rearrange them in place. So just Click and drag them wherever you want. Want to create Drop-downs? Just drag a page slightly to The right underneath another one and That will make it a sub menu. I'm just Going to put this one back. One Important step is to assign this menu to The primary location within the display Locations here. So just click on the Primary menu option right there. And That tells WordPress to show this menu In your themes main navigation bar. Before you hit save down here, uncheck Automatically add new tople pages to This menu. It sounds helpful, but it Will clutter your menu fast. Okay, when you're ready, just click save Menu to save that menu. And just like That, your menu is organized and easy to Use. Okay, now it's time to style that Menu up. So, we need to head to the Customizer and you'll usually find it Under appearance here and then click on Customize. So, now we're in the WordPress customizer and we can see We've got the live view of our site and You'll see your new navigation menu up Here at the top in the live view. If you Hover over that, you'll see a little Edit icon right here. Click on that and Then click on the design Tab. And here you can change things like The font, the font color, the menu
Color, and the spacing of your menu. To Do that, you just click on any of the Items. So, for instance, font. You can Click on the drop down here. Just going To scroll down a little bit, and you can Change the font family, the font weight, The font size of that main menu option Right there. We're just going to head Back. Now you want to switch to tablet And mobile view mode to check those Views. To do that, just head down here To the customizer views. And you can see Desktop view right there. Tablet view, Switch to that. And then mobile view, we Can switch to that as well. You want to Make sure everything still looks clean When the screen Shrinks. Here you can see the menu is Responsive and switches to the hamburger Menu that you can toggle as well from This view so that you can see it open And view the menu items that you would See on the mobile view. You can also Click on either of the edit Icons on either of these to style them Too if you want. So I'll click it on This view for now and then I can click On the design tab and then I can change All the links colors the background the Font for this mobile menu view. If you Want to switch to a different navigation Menu you've created for the mobile view Because you might be able to see here This isn't the the menu I set up
Earlier. This is the primary menu I had At the very start of this video. You can Easily do that by clicking on the General tab for the off canvas menu. That's the mobile menu we're currently On here. And then you can configure the Menu from here. So just click on that Item there. And then come down to off Canvas menu. And I'll switch this to the Main menu that I created a minute ago. And a quick note, if your theme allows Secondary menus, that's menus that stack Upon on top of each other. So if I went To the desktop here, might be a menu Here and a menu above. Too many menus Equal confused visitors, basically. So, You want to just make sure any of the Menus that you add are adding value and Taking visitors to wherever they want to Go. Your header is usually the first Thing people see right at the top of Your site. It's this section right here That houses the logo, the navigation Menu, and the button on this site. You Can see it highlighted as I hover over It. So you want to make sure as this is The first thing people see, you want to Make it count. So if you're using a Theme like Astra, like I am or Cadence Or Generate Press, you'll have a Built-in header builder. And from the Customizer, all you need to do is go Back to the main customizer settings Right here and then click on header and
You'll be able to see the header builder For your website. From here, you can Upload things like your logo, add your Menu, and a call to action button, which You can actually see on this site. We've Got the logo right there. We've got our Menu navigation menu in the middle, and We've got a button right there. And you, They're reflected in the builder down Here. And the layout of this, it's all Completely drag and drop. So, you can Move things around. So, if you want the Primary menu over to the left over here, And you want the site logo in the Middle, for instance, you can totally do That. You can swap those things around. I'm just going to put them back how they Were, and you can set everything up with Rows and columns, but you can also Switch everything around or stack it Vertically if you wanted to. Here's Another tip. Test both transparent and Solid headers on your pages. Transparent Looks great over a hero image. Solid Works better on content heavy pages. You Can also swap in different versions of Your logo for light and dark Backgrounds. The goal here is clarity, Clean, clickable, and Consistent. Onto the footer, the part Everyone forgets, but footers can build Serious trust. They tell people this Site is legit. So in the customizer, go Back to the main customizer settings and
You'll see the footer option right here. Just click on that. That's now opened up The footer options here and the footer Builder just like the header builder. Many themes let you pick how many Columns you can have within the footer Builder. So if you just click on the Little cog here, you'll then be able to See in the settings panel here the Number of columns you can have in a Footer section. So we're in the middle Row right here, but you can do it for Either of the other rows as well. For Astro theme, you get something like one To six columns and you can also pick the Layout of those columns. So if you want Some columns to be wider and than others To fit certain elements in, you can Choose that within the layout layout Section there as well, which is really Really cool. What you want to do with The footer is start with the basics. So Add your logo in again. So I've got Social icons right here, which I don't Really want. So I'm just going to remove Those social icons. And then I'm going To click the plus button right here as Well. I'm just going to have a look for The widget one block. And then I'm going To click on that widget Block. That's going to open up the Settings right here where I can add a Block. I'm just going to click in here And I'm going to either search for if
You or if you can see it like I can in The dashboard right now. Just going to Click on the the image block right There. And then I'm going to click on Media library cuz I know I've already Uploaded a version of my logo for this. So, I'm just going to click on that, Select it from the media library, and Then click on the select button. That's Now added in the logo right there. And The logo is a little bit big at the Moment, so I'm just going To make it a bit Smaller. And still make it a little bit Smaller. Okay. And that looks pretty Good. Also include important links like Your contact, about blog. So you might Be able to see on this footer here, I've Got a footer menu item within the center Of the footer here. And that's just Reflecting the navigation menu up at the Top of the page. You can also drop in Things like your legal pages like a link To your privacy policy, terms of Service. Also, a really great option Here as well is if you've got something Like Optin Monster installed on your Site and you're using it to collect Leads for your newsletter or your email List. This is a great place to drop in a Newsletter sign up form and be able to Gather emails. This is something that People will see across the site, so it Doesn't matter what page they are on.
You also want to make sure that this Footer is styled so it matches the rest Of your site. Use your brand colors, Clear fonts, and lots of breathing room. Don't overcrowd the footer. It's really Important you don't do that because it's Going to put people off actually looking At it if it's overcrowded with too much Information. And if your footer has a dark background Like I've got right here, make sure you Upload a white version of your logo so It stands out. As you can see, I've done That here. I've got a dark version at The top of the site. And now I've got a Light version in footer right there. That little detail, it makes a big Difference. As you can see, it stands Out. It looks a little bit more Professional. So once you're happy with How your footer looks and your header Looks, make sure you click on publish up Here in the top right. to save those Changes and have those changes become Live on your website. And I'm going to Move out of the customizer for this one. So, I'm just going to close it by Clicking the close button up here. And Now we're back in the menu screen. And Something beginners miss. Well, you're Not limited to just pages in your menu. As you can see in the menu editor right Here in the add menu item section, There's pages, there's posts, and
There's custom links. You can add even More to this section as well. If you Just click on the screen options up Here, you'll then see there's some more Options here. So, you can add categories And tags to this section. And also, you Might be able to add things like product Categories if you're using Woo Commerce. This is especially powerful for blogs And e-commerce stores because you can Guide visitors to content by topic or Tag or category, not just by page. and It adds depth and also helps SEO too. So Things like posts, you can add posts to The menu, custom links, and if you've Organized your website using categories And tags, you can show category pages in The menu and also um items you've tagged As well. And obviously remember once You've added anything to your menu, Click save menu down here. Make sure Those changes are saved. And before you Call it done, check how everything looks On mobile. So we're going to head back To the customizer for this. Click on Customize underneath appearance there in The dashboard. And then once the Customizer is open, obviously this is The desktop view of the live site. You Can just click on the mobile view option Here to toggle between views and make Sure everything looks great on the Mobile view. So click on the menu. Just Make sure the menu looks fine. Scroll
Down. Just look at the font sizes. Make Sure any drop-downs are working and that Any buttons are easy to tap and have a Lot of space around them. And also make Sure that your header and your footer at The bottom look fantastic and have the Extra space around them that they need. Obviously, you can do this within the Customizer, but I would also encourage You to grab your phone and go onto your Site and just check it through your Mobile device and check everything Because, you know, fingers aren't as Precise as mouse clicks. So, you can Check the buttons and the links and any Drop downs. Just click on them and make Sure they work and everything works as You'd expect. You want every visitor to Feel like your site was made for them, No matter the screen size. All right, Your menu is clean. Your header actually Reflects your brand. And your footer, it Doesn't feel like an afterthought Anymore. That's a solid foundation. And Here's the truth. When your structure is Strong, your content performs better. Visitors trust you more. They stay Longer. They take action. So, what's Next? Maybe it's optimizing for speed or Improving your design. Either way, You're no longer guessing. You're Building. And that's what this channel's Here for. So stick around. I've been Ryan. This is WP Beginner.
