When you think of what makes a successful website, what comes to mind? Strong visuals, functional Online Store and great content, right? When you land on a stunning website, you don’t generally think, “Wow, that website navigation bar is impeccable!” do you?
That being said, if you land on a business website with a navigation taking a good portion of their homepage, “What a mess!” may come to mind.
You see, website navigation is a funny thing. It isn’t given it’s due credit when it’s good, but it definitely get’s the raw end of the deal when it’s bad. When it comes to building a professional website, although it may be seemingly low on the totem pole, great navigation is key.
Today, we’re going to give you the key details in cleaning up your website navigation in just a few easy step. The star of today’s show will be flyover menus.
To kick us off, let’s talk a little bit about what your website navigation should include. A professional website’s navigation bar will be limited to only the pages most important to every site visitor. This includes (but is not limited to) your:
- Homepage
- Contact page
- Locations
- Features/Services page
- About us page
- Frequently ask questions page
- Online Store
- Gallery
Think of these pages as categories, and the rest of your pages as subcategories. For example, if you have a physical business with multiple locations, it may be necessary to give each of the stores their own pages, but it’s not necessary to put them all in your top level navigation. This is where flyover menus come in.
While in Yola Sitebuilder, hop into the “Page” tab and click “Navigation.”
Once in your Page Manager, drag and drop your subcategories below your main category.
Once your subcategories are below your main categories, click the green arrow, to turn them into flyover menus.
Voila! You’ve created a flyover menu, and you’ve cleaned up your website navigation.
Have any fixes you’d like featured? Let us know in the comments below!
I would love these flyovers on my site. Are they available to Yola Silver members yet?
They absolutely are, Alda! Try them out on your site and let us know how they look!
Cheers! Will have a look and play around to see what I can achieve
A
Is there any way to customize the look/feel or even just color of the flyover menu?
Stacy, that’s absolutely achievable with our HTML widget! We have flyover pros on our support team – for these specific customizations, go ahead and email support@yola.com to have an HTML specialist assist you!
Are there certain themes that don’t support the drop-down style of sub menu that you are demonstrating? My sub menus are showing up down below not as a true flyover. Any ideas?
Hi Diane,
It sounds like you are using a Style that supports a horizontal second-level menu set up, a premium feature of Yola Gold and Yola Silver, which is why you are seeing it display as such!
The flyover menu is available on all but 8 of our free Styles at this time. If you are looking for the flyover menu to display as it does in our examples, please try out a new style. SuperFlat and Skyline are two of our newer styles. They both work hand in hand with our Style Designer, allowing endless opportunities for customization.
If you are willing to share your website URL with us, we would be happy to take a closer look at this with you, and offer further suggestions!
Is there a way I can add an outside site to my navigation? I’d like to add a magazine’s website.
Hi Lagie,
This is absolutely possible with the help of the HTML widget!
Check out this tutorial for details: https://www.yola.com/tutorials/article/Links-that-Redirect-when-you-click-on-menu-tab-1285944421190/Site_structure_and_design
If you need any additional HTML help, feel free to contact up at support@yola.com!
Would you please be able to tell us how we can make the parent menu item non-clickable? Cheers!
Would you please be able to tell us how we can make the parent menu item non-clickable? Thank you!