Help In Making Navigation Bar sticky

Hi Iam Trying to make amazon.in navbar but not able to put sticky function as it working in amazon.in( i trying it to be as sticky as amazon.in) help shall be highle appreciated. Thanks pen is https://codepen.io/gurpreet_singh9189825/pen/MWaepQP

Hello there.

I believe you are wanting position: fixed; not sticky.
Here is information on the different uses of the position property: https://www.w3schools.com/css/css_positioning.asp

Some things to note when using CodePen:

  1. CodePen does not expect any content outwith the body tags.
  2. All meta, link, and script information must be put in the :gear: settings section of the HTML editor.
  3. You do not need to/cannot link the CSS in your HTML, if you place the CSS in the appropriate section.
  4. If your project uses React, use the Babel preprocessor, and link the CDN in the appropriate :gear: section.
  5. The editors offer the ability to format and analyse your code, providing useful information about forgotten closing tags etc.

If you are still confused with how to use CodePen, please read the official documentation.

Hope this helps

They are doing it with JS. At some scroll position, they set it to be fixed.

.navbar-1 {
  display: flex;
  justify-content: space-around;
  list-style: none;
  background: #232f3e;
  width: 100%;
}

.fixed {
  position: fixed;
  top: 0;
}
const nav1 = document.querySelector('.navbar-1');

document.addEventListener('scroll', () => {
  window.pageYOffset > 60 ? nav1.classList.add('fixed') : nav1.classList.remove('fixed')
})

The problem you have doing it with position sticky is that the nav element is the scroll container for the sticky element and that doesn’t work. The parent would need to be the body (or some element with a scroll overflow).

BTW, you have an unclosed div inside the submit button.

No ,actually Iam trying it to be fixed but at certain position which even after reading (positions) i am not able to apply.if you can just see amazon.in navbar you would understand what iam trying to do.

Hi ,
Thanks for reading.
cant we do it without JS?