Set Up Navigation in Hostinger Website Builder
TL;DR:
- Hostinger's Website Builder uses a simple drag-and-drop interface for navigation setup
- Drop-down and mega menus aren't supported, but you can build effective single-level menus
- You get one main navigation menu per site with unlimited pages and links
- Customise fonts, colours, sizes and arrangement to match your brand
- All menus are automatically responsive across desktop and mobile devices
Hostinger Website Builder keeps navigation simple. You won't find complex dropdown menus or mega menu options here, but what you do get works well for most websites.
The platform gives you one main navigation menu per site. That's it. No secondary menus, no footer navigation options through the builder itself. But this limitation actually helps keep things clean and user-friendly.
Building Your Navigation Menu
Head to your site editor and look for the navigation section. You'll see a straightforward interface where you can add pages and external links.
Adding pages is simple. Click "Add Page" and your new page automatically appears in the navigation. The builder handles the linking for you.
For external links, click "Add Link" and paste in your URL. This works well for social media profiles, external resources, or affiliate links.
The drag-and-drop interface makes reordering menu items easy. Grab any menu item and drag it to where you want it. The changes save automatically.
Customising Your Menu Design
Hostinger gives you decent customisation options within the builder's constraints.
Font Options: Choose from the available font library. Stick to web-safe fonts for the best loading speed across all devices.
Colours: Match your navigation to your brand colours. You can set different colours for normal state, hover effects, and active pages.
Sizing: Adjust text size to fit your design. Bigger isn't always better – aim for readability across all devices.
Alignment: Position your menu left, centre, or right. Most sites work best with left-aligned or centre-aligned navigation.
Spacing: Control the gap between menu items. Too tight looks cramped, too loose looks disconnected.
Mobile Navigation
Hostinger automatically converts your navigation to a hamburger menu on mobile devices. You can't change this behaviour, but it works well for most sites.
The mobile menu slides out from the side when users tap the hamburger icon. All your menu items appear in a vertical list, making them easy to tap on smaller screens.
Test your mobile navigation regularly. What looks good on desktop might feel cramped or awkward on mobile.
Working Around the Limitations
No dropdown menus means you need to think differently about site structure. Instead of hiding secondary pages under main categories, consider these approaches:
Use Clear Page Names: Make your main navigation items descriptive enough that users know what to expect.
Create Landing Pages: Build category pages that link to specific content. For example, a "Services" page that showcases all your offerings with links to individual service pages.
Add Footer Links: While the builder doesn't offer footer navigation menus, you can add text elements with links to secondary pages.
Use Button Elements: Place call-to-action buttons in your content that link to important pages not in your main navigation.
Common Navigation Mistakes
Too Many Menu Items: More than seven main navigation items usually confuse visitors. Keep it focused on your most important pages.
Unclear Labels: "Solutions" or "Offerings" don't tell visitors what they'll find. Use specific terms like "Web Design Services" or "Pricing".
Inconsistent Styling: If you change fonts or colours, make sure they work across your entire site, not just the navigation.
Forgetting Mobile: Always check how your navigation looks and works on mobile devices. Many visitors will only see your mobile menu.
Testing Your Navigation
After setting up your navigation, test it thoroughly. Click every link to make sure it goes to the right place. Check that page names match the actual page content.
Ask someone else to navigate your site without guidance. Watch where they get confused or lost. Their experience will highlight navigation problems you might miss.
Use your phone to test the mobile version. Tap through the menu and make sure all links work properly on smaller screens.
FAQs
Can I create dropdown menus in Hostinger Website Builder?
No, dropdown menus aren't supported. You're limited to single-level navigation menus.
How many menu items can I add?
There's no hard limit, but keep it under seven items for the best user experience.
Can I have multiple navigation menus?
No, you get one main navigation menu per website.
Will my navigation work on mobile?
Yes, Hostinger automatically converts your navigation to a mobile-friendly hamburger menu.
Can I change the mobile menu style?
No, the mobile navigation style is fixed. It appears as a slide-out menu from the side.
Jargon Buster
Navigation Menu: The main set of links that help visitors move around your website, usually found at the top of each page.
Hamburger Menu: The three horizontal lines icon that reveals navigation options on mobile devices.
Responsive Design: How your website automatically adjusts to look good on different screen sizes.
Landing Page: A page designed to showcase multiple related options, often used when dropdown menus aren't available.
Wrap-up
Hostinger Website Builder's navigation system is straightforward but effective. While you won't get fancy dropdown menus or multiple navigation areas, the simplicity often works in your favour.
Focus on clear page names, logical organisation, and clean design. Test everything on both desktop and mobile. Most visitors care more about finding information quickly than having complex menu systems.
Remember that good navigation should be invisible to users. If people can find what they need without thinking about your menu structure, you've done the job right.
Ready to build better websites? Join Pixelhaze Academy for in-depth training and support.