How do I make nav bar stick on top when you scroll down page

Question

0.00/5 (No votes)

See more:

I am doing this site for someone and was wondering how to make the navigation bar sticky on desktop and scroll with the page ? It works as a responsive just fine. Any help would be helpful, thanks in advance.

HTML

<!DOCTYPE html>

body {margin:0;}

.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

}





<div class="topnav" id="myTopnav">
    <a href="#home">Home</a>
    <a href="#contact">Accessories</a>
    <a href="#contact">Bras & Panties</a>
    <a href="#lingerie">Bridal</a>
    <a href="#contact">Costumes</a>
    <a href="#contact">Lingerie</a>
    <a href="#contact">Sleepwear</a>
    <a href="#contact">Swimwear</a>
    <a href="#">Adult Super Store</a>
  <a style="font-size: 15px" class="icon">☰</a>
</div>
<h1>
<a href="#" title="Welcome to the lingerie shop and more"></a>
</h1>
<div style="padding-left: 16px">
  <h2>Responsive Topnav Example</h2>
  <p>Resize the browser window to see how it works.</p>
</div>


function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}

What I have tried:

Am new to this so not sure what to try to make the nav bar stick on scroll

Posted 16-Oct-17 8:50am

Reddog2

Updated 17-Oct-17 12:33pm

Richard Deeming

v3

Add a Solution

Comments

j snooze 16-Oct-17 17:32pm

You look like you're working too hard on this. May I recommend downloading the css3 bootstrap. They have all kinds of stuff for creating navbars with menus, and responsive design classes already included. Plenty of code samples for you to look at and use.
https://getbootstrap.com/docs/3.3/css/ this way you don't have to recreate the wheel, but concentrate more on your color schema, look and feel.

Richard Deeming 17-Oct-17 11:57am

I've removed the "Adult super-store" link from your question, since it made the question look like spam.

In future, please avoid posting links to external sites.

Reddog2 17-Oct-17 18:38pm

OK thanks for the info, didn't know about the thing w the external links forgot I had it in the menu code. But seen that you removed it. And being new at posting questions, so thanks again ..:)

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ThilinaMD · Accepted Answer · 2017-10-17T09:37:00

Solution 2

you can use position to fixed state,

.topnav {
  overflow: hidden;
  background-color: #333;
  position:fixed;
}

Posted 17-Oct-17 9:37am

ThilinaMD

Comments

Richard Deeming 18-Oct-17 7:55am

Another good solution, and with much better browser support than position:sticky. :)

You'll just need to add some padding to the top of the body to leave room for the fixed element, because it's no longer part of the document flow.

Richard Deeming · Accepted Answer · 2017-10-17T06:06:00

Use "sticky" positioning:
Can I use... CSS position:sticky[^]
Sticky positioning | MDN[^]

The only change required to your existing code:

CSS

.topnav {
  overflow: hidden;
  background-color: #333;
  
  /* Add these two lines: */
  position: sticky;
  top: 0;
}

Demo[^]

It doesn't work in IE or Edge, so you'll need a polyfill:
GitHub - wilddeer/stickyfill: Polyfill for CSS `position: sticky`[^]
GitHub - dollarshaveclub/stickybits: Stickybits is a lightweight alternative to `position: sticky` polyfills 🍬[^]

Reddog2 · Accepted Answer · 2017-10-17T12:33:00

Solution 3

OK thanks :) I will give it a shot

Posted 17-Oct-17 12:33pm