Intermediate
How to create sticky navigation menus on Hostinger
Quick Answer
Create sticky navigation menus on Hostinger by adding CSS position: fixed or position: sticky properties to your navigation element through the Website Builder's custom CSS section or by editing your theme files directly. This keeps your menu visible while users scroll through your website.
Prerequisites
- Active Hostinger hosting account
- Website with existing navigation menu
- Basic knowledge of CSS and HTML
- Access to Hostinger's Website Builder or File Manager
1
Access Your Website Editor
Log into your Hostinger control panel and navigate to Websites. Click Manage next to your domain, then select Website Builder if using Hostinger's builder, or File Manager if editing files directly. Choose Edit Website to open the design interface.
Tip
Make sure to create a backup of your website before making any changes to the navigation structure.
2
Locate Your Navigation Menu
In the Website Builder, click on your existing navigation menu element to select it. If using File Manager, navigate to your theme's header file (usually
header.php or index.html) and locate the navigation <nav> or <div> element. Note the class or ID name assigned to your navigation container.Tip
Most navigation menus are located in the header section and have classes like 'navbar', 'menu', or 'navigation'.
3
Open Custom CSS Editor
In Hostinger's Website Builder, go to Design in the left sidebar and scroll down to find Custom CSS. Click Add Custom CSS to open the code editor. If using File Manager, locate and open your theme's
style.css file or create a new CSS file to link to your HTML.4
Add Sticky Navigation CSS
Add the following CSS code to make your navigation sticky:
.your-nav-class {
position: sticky;
top: 0;
z-index: 1000;
background-color: #ffffff;
}.your-nav-class with your actual navigation class name. The z-index ensures the menu stays above other content when scrolling.Tip
Use 'position: fixed' instead of 'position: sticky' if you want the menu to always stay in the same position regardless of scroll behavior.
5
Adjust Menu Styling
Add additional CSS properties to ensure your sticky menu looks professional:
box-shadow: 0 2px 5px rgba(0,0,0,0.1); for a subtle shadow effect, and transition: all 0.3s ease; for smooth animations. Set a specific width: 100%; if the menu doesn't span the full width.Tip
Consider reducing the menu height or padding when it becomes sticky to save screen space.
6
Test Responsive Behavior
Click the Mobile preview button in Website Builder or use browser developer tools to test different screen sizes. Adjust your CSS with media queries if needed:
@media (max-width: 768px) { .your-nav-class { position: relative; } } to disable sticky behavior on mobile devices if desired.Tip
Some sticky menus work better on desktop than mobile, so consider different behaviors for different screen sizes.
7
Save and Publish Changes
Click Save in the Custom CSS editor, then click Publish in the top-right corner to make your changes live. If using File Manager, save your CSS file and ensure it's properly linked to your HTML pages. Clear any caching plugins or browser cache to see the changes immediately.
Tip
Test the sticky navigation on the live site in an incognito browser window to ensure it works for all visitors.
Troubleshooting
Navigation menu is not staying sticky when scrolling
Check that your CSS selector matches the exact class or ID of your navigation element. Ensure the parent container doesn't have
overflow: hidden which can break sticky positioning.Sticky menu is hidden behind other content
Increase the
z-index value in your CSS to a higher number like z-index: 9999; to ensure the navigation appears above all other page elements.Menu appears broken or overlapping on mobile devices
Add responsive CSS using
@media (max-width: 768px) queries to adjust the sticky menu's behavior, size, or disable it entirely on smaller screens.Changes are not visible on the live website
Clear your browser cache and any caching plugins. In Hostinger, go to Performance settings and clear the website cache. Wait a few minutes for changes to propagate across all servers.
Ready to get started with Hostinger?
Put this tutorial into practice. Visit Hostinger and follow the steps above.
Visit Hostinger →