Bollate

HTML

[ANSWERED] html – How do I make my nav bar remain on top of page while scrolling?

By

Nov 19, 2022 ,

Solution 1 :

Just add position: sticky to your nav element. This tells the element to stay in the view. So the element toggles between a relative and fixed position.

Solution 2 :

Here you go with a solution

.container {
  width: 95%;
  margin: 0 auto;
  position: fixed;
  top: 0;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

header {
  background: #FF4136;
}

nav {
  float: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 193px;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

nav a:before {
  content: '';
  display: block;
  height: 6px;
  width: 0%;
  background-color: #444;
  position: absolute;
  top: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
} 
<div class="container">
    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="informatii.html">Informatii</a></li>
            <li><a href="obiective.html">Obiective Turistice</a></li>
            <li><a href="galerie.html">Galerie</a></li>
            <li><a href="video.html">Video</a></li>
            <li><a href="surse.html">Surse</a></li>
        </ul>
    </nav>
</div>

Add Position: fixed and top: 0 to the container

Solution 3 :

You got to do only a simple thing:

.navbar {
   position:fixed;
   top: 0;
}

Solution 4 :

Here’s how I would implement a “sticky” menu. The contextual styling is left to you. Flexbox works great for navigations!

body { 
  background: hotpink;
  margin: 0;
  padding:0
}

.container {
  margin: 0 auto;
  max-width: 95%;
}

main img {
  max-width: 100%;
  margin: 0 auto;
  display: block;
}

nav {
    padding: 1em;
    margin: auto;
    left: 0;
    right: 0;
}

nav ul {
    padding: 0;
    list-style: none;
    display: block;
}

nav li {
  margin: 0 auto;
  padding-top: 1em;
  padding-bottom: 1em;
  position: relative;
}

@media screen and (min-width: 600px) {
  body {
    padding-top: 110px;
  }

  nav {
    margin: 0 auto;
    position: fixed;
    margin-top: -110px;
    background: hotpink;
    border-bottom: 4px solid black;
  }

  nav ul {
    display: flex;
    flex-flow: row;
    justify-content: center;
    flex: 1;
    margin: 0;
  }
}

.container {
  margin: 0 auto;
  max-width: 95%;
}

/* Rest is left unchanged */

header::after {
  content: '';
  display: table;
  clear: both;
}

header {
  background: #FF4136;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

nav a:before {
  content: '';
  display: block;
  height: 6px;
  width: 0%;
  background-color: #444;
  position: absolute;
  top: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
} 
<div class="container">

            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="informatii.html">Informatii</a></li>
                    <li><a href="obiective.html">Obiective Turistice</a></li>
                    <li><a href="galerie.html">Galerie</a></li>
                    <li><a href="video.html">Video</a></li>
                    <li><a href="surse.html">Surse</a></li>
                </ul>
            </nav>

        </div>
        <main class="container">
        <img src="https://source.unsplash.com/random/1200x500" alt="">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id ipsam porro, sint temporibus labore placeat non illum laudantium quaerat iusto quis molestiae libero numquam quos, expedita, consequatur adipisci. Accusantium, in.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, dolores. Laudantium in, asperiores facere velit corrupti officia ut veritatis iure. Modi nisi, totam, unde incidunt velit quasi! Inventore, perferendis, incidunt.</p>
        </main>

Problem :

I can not find a solution for this.

.container {
  width: 95%;
  margin: 0 auto;
}

header::after {
  content: '';
  display: table;
  clear: both;
}

header {
  background: #FF4136;
}

nav {
  float: center;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-left: 193px;
  padding-top: 23px;
  padding-bottom: 23px;
  position: relative;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

nav a:before {
  content: '';
  display: block;
  height: 6px;
  width: 0%;
  background-color: #444;
  position: absolute;
  top: 0;
  transition: all ease-in-out 250ms;
}

nav a:hover::before {
  width: 100%;
} 
<div class="container">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="informatii.html">Informatii</a></li>
      <li><a href="obiective.html">Obiective Turistice</a></li>
      <li><a href="galerie.html">Galerie</a></li>
      <li><a href="video.html">Video</a></li>
      <li><a href="surse.html">Surse</a></li>
    </ul>
  </nav>
</div>

I would like my nav bar to remain fixed on top of page. However, every time I change position to fixed, the bar completely disappears. I have no idea why it’s doing this?

Comments

Comment posted by Daniele Grigorean

it doesn’t change anything, it goes the same way

Comment posted by here

I copied your code int a JSFiddle

Comment posted by Daniele Grigorean

It doesn’t work as I would like, and it changes my style on the navigation bar 🙁

Comment posted by Shiladitya

@DanieleGrigorean I don’t see any change in styling, can you please your stying as well?

Comment posted by Daniele Grigorean

do not understand … it change the color of the navigation bar, and turn it into another resolution

Comment posted by Decoolipascal

For this solution to work you have to replace

By

Related Post

HTML

[ANSWERED] html – Trying to align a div to the right using CSS

Nov 20, 2022
HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] html – select all elements within a parent class

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022