H Hostinger

How to create sticky navigation menus on Hostinger

intermediate 8 min read Updated 2026-04-20
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.

Full Hostinger Review

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

Step-by-Step Instructions

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.
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.
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;
}
Replace .your-nav-class with your actual navigation class name. The z-index ensures the menu stays above other content when scrolling.
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.
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.
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.
Test the sticky navigation on the live site in an incognito browser window to ensure it works for all visitors.

Common Issues & 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.

Prices mentioned in this guide are pulled from current plan data and may change. Always verify on the official Hostinger website before purchasing.
Visit Hostinger View Hostinger Pricing

Related to Hostinger

ReviewHostinger ReviewPricingHostinger PricingAlternativesHostinger Alternatives