Themeisle Docs

Appearance

How to change the navigation from scrolling to static? ​

Use this article if Hestia's header is covering a notification bar, cookie banner, announcement banner, or admin-bar customization placed at the top of your page.

By default, Hestia uses a fixed (sticky) header that stays at the top of the viewport as visitors scroll. When another plugin also places an element at the top of the viewport, the two can overlap. This is expected behavior caused by two elements competing for the same fixed top position — it is not a bug. The options below explain how to resolve it.

Option 1: Disable the sticky header (Hestia Pro) ​

If you are using Hestia Pro, you can turn off the sticky header without writing CSS:

  1. Go to Appearance > Customize > Header Options > Website - Header (Navigation).
  2. Toggle Sticky Navbar off.
  3. Click Publish.

The header will no longer follow the visitor on scroll and will not overlap top-positioned elements.

Option 2: Make the header static using CSS ​

This option works for both Hestia and Hestia Pro.

  1. Go to Appearance > Customize > Additional CSS.
  2. Paste the following code:
css
.navbar-fixed-bottom, .navbar-fixed-top {	
	 position: absolute !important;	
	}
  1. Click Publish and check the result.

Option 3: Keep the sticky header and offset a third-party banner ​

If you want to keep the sticky header but prevent it from covering a banner, you can shift the banner down with a CSS offset. You need the banner's CSS selector and your header's rendered height.

  1. Use your browser's developer tools to inspect the banner element and note its CSS class or ID.
  2. Go to Appearance > Customize > Additional CSS.
  3. Add a rule like the following, replacing .your-banner-selector with the actual selector and adjusting the pixel value to match your header's height:
css
.your-banner-selector {
    margin-top: 70px;
}

If the banner uses position: fixed, use top: 70px instead of margin-top. The correct value depends on your header's rendered height, which varies with logo size and other customizations — measure it with your browser's inspector.

📝 Note: Each third-party banner plugin uses a different CSS selector and rendered height. If you are unsure of the selector, check the banner plugin's documentation or use your browser's element inspector to find it.

💡 Result ​