Member Avatar for Chris_14

Hello. I am wondering how to create a floating navigation bar? (when you scroll, it will stay on top)
This is an example:

  • 6 Contributors
  • 5 Replies
  • 361 Views
  • 8 Months Discussion Span
  • Latest Post Latest Post by getaprogrammer

Dani AI

Generated

As asked, the goal is a nav that stays visible while you scroll. The link in the original post is dead (as pointed out) and several replies suggested making the bar “fixed” (, ) or using a theme (, ). Fixing the bar works, but here are clearer, modern, and practical options—plus small gotchas to watch for.

Use CSS position: sticky when you want the element to behave normally until it reaches the viewport top, then “stick” there. It keeps the element in flow so you don’t need to push the page content down manually, but it requires that no ancestor creates a clipping context (avoid overflow: hidden/auto on parents).

nav.site-nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
}

If you need a truly fixed header (it always sits on top), reserve space for it so content doesn’t jump. Use a CSS variable for the nav height and include safe-area insets for phones with notches:

:root { --nav-h: 56px; }

header.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav-h);
  z-index: 1000;
  padding-top: env(safe-area-inset-top, 0);
}

main { padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0)); }

If the header height is dynamic (responsive menus), measure it once and set the variable from JS:

const h = document.querySelector('.site-header');
const setH = () => document.documentElement.style.setProperty('--nav-h', h.offsetHeight + 'px');
setH();
window.addEventListener('resize', setH, { passive: true });

A few quick tips: add a visible “skip to content” link for keyboard users (<a href="#main" class="skip-link">Skip to content</a>); if sticky doesn’t work, check parent overflow and stacking contexts (transforms or z-index on ancestors can hide the nav); use IntersectionObserver to toggle small UI changes (shadow, compact header) rather than expensive scroll handlers; and keep mobile height small so it doesn’t steal viewport space. If a theme misbehaves, hand-coding a focused solution is often simpler and more robust—measure, test across sizes, and iterate.

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

The link you provided does not appear to work.

If you want for a navigation menu to remain fixed in its position, wrap the menu within a div and apply the position:fixed property.

Member Avatar for weweb

Well, you can use such theme: that can be found on Themeforest.

Edited by weweb because: misspeling
commented: Horrible solution... -2
Member Avatar for mattskills

use position:fixed; in the css element and it will stay put when scrolling.

Member Avatar for <M/>

Well, you can use such theme: Business WordPress Themes that can be found on Themeforest.

You know, not everything has to cost money to be solved... most of their templates are meant to look good rather than operate will... I used some of their best templates yet to offer and they didn't meet half of my expectations. I found the best results when making the code myself.

Member Avatar for getaprogrammer

You make the navigation bar. Lets suppose its a div.
Add this style (at CSS)

#navbar{position:fixed; top:0; margin:0; left:0; width:100%}

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.