Hey all you ambitious people out there, we see you. You are the DIY-ers. The ones that love a good challenge and love to be able to actually get things done and feel super accomplished. Well, we got you! ????
We know how frustrating it can feel to try to build a mobile-friendly website header only to have it look less than appealing when you get done. That’s why we recorded this super short tutorial with all our best tips and tricks for you.
We are using Weeknight Website as our builder (duh) because it’s literally the BEST all in one website tool out there. Trust us, we have tried them all… ????
So, check out the video below and get your website menu #done. The video is a step by step of how to build your website menu on WordPress.
Step by Step for how to make a header that is mobile responsive:
You may be asking… How do I make my website header? How do I make it responsive? Please note that we are using Weeknight Website and if you are using another theme or builder this may not work for you the same way.
1. Create a Menu.
Some of you guys are jumping right in thinking, “I need to make my website header” and you don’t even have a menu yet. So first we’re going to cover that. Okay?
Go to appearance> menus. If you don’t have a menu set up yet, what you’re going to do is create a new menu.
Here are some options:
- You can select specific pages
- you can add your posts,
- you can also do custom links if you want.
For example, if you have a page that’s somewhere else on the internet (like a facebook fan page for instance), but you want to make sure that its easily accessible just add it as a custom link. You can add the link where it says custom URL and then add a name below that.
2. Create the Header
Go to Builder > Themer layouts > Add New (next to Themer Layouts at the top of the page)
Name this whatever you like, but we recommend header to keep it simple! 😉
Here are some options:
- Sticky: means that as the person scrolls down the page, the menu sticks to the top.
- Shrink: means as the user scrolls, if it sticks to the top and shrinks up a little bit
- Overlay: this means does the menu lay over the top of the page transparently or does it have its own separate spot.
Prop Tip: If you want, you can have different headers for different pages on your website. For instance, if you want your blog to have a different header, you can actually make it so that all singular and all archives have a different a header that shows for those pages.
For this example, we are doing a header that will appear on the entire site (which is what most of what you are going to want)
After you have selected all your settings, go ahead and hit publish.
3. Build the header
Click the blue button to open the weeknight website builder
The default that it brings me into is a really plain blue layout with some links and basic navigation. So what we want to do is first is to change our menu to the new menu that we’ve created.
Pro Tip: You might have noticed there is a new trend we call “flyout menus” on websites. This means that the menu just always appears in one corner or another with a 3 lined icon called a hamburger icon. When you open it up, you get the entire menu. If you want it to do that, what you’re going to do is under “responsive” select breakpoint “all devices”
Now chose the layout of the menu you want to use.
Drag in your logo, menu, and social icons into place and begin to resize for all the devices by hitting the R key on your keyboard.
Once you have a header that makes you happy be sure to click the “Done” and then “publish” button.
We can’t wait to see what you’re building. We are so very proud of you for taking the time to do something for yourself.