<!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"; } }
position
fixed
.topnav { overflow: hidden; background-color: #333; position:fixed; }
position:sticky
.topnav { overflow: hidden; background-color: #333; /* Add these two lines: */ position: sticky; top: 0; }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)