Responsive Fixed Navigation Overlay Menu
How do I make an responsive fixed navigation overlay menu?
What is a responsive fixed navigation overlay menu? How do you make a responsive fixed navigation overlay menu? This script and codes were developed by Hayden Mills on 14 August 2022, Sunday.
Responsive Fixed Navigation Overlay Menu Previews
Responsive Fixed Navigation Overlay Menu - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Fixed Navigation Overlay Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="navnav">
<div class="logo"> <a href="index.html"><img src="http://www.adobe.com/inspire-apps/exporting-svg-illustrator-0913/fig14/img/napoleon%20for%20svg%20simpl%201.svg" alt="logo"/></a> </div> <a href=""class="menuIcon">☰ MENU</a> <ul class="nav"> <li><a href="#">Home</a></li> <li><a href="#">What We Do</a></li> <li><a href="#">Who We Are</a></li> <li><a href="#">Contact</a></li> </ul>
</div>
<div class="contain-this"> <h2>Responsive Fixed Navigation Overlay Menu</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Responsive Fixed Navigation Overlay Menu - Script Codes CSS Codes
html, body{ padding: 0; margin: 0; background: #fafafa; font-family: 'Merriweather', serif;
}
p{ font-size: 22px; color: #484b48; font-family: 'Merriweather', serif;
}
.contain-this{ padding: 100px;
}
/* Navigation */
.navnav{ position: fixed; width: 100%; z-index: 9999;
}
.logo{ position: absolute; left: 25px; z-index: 10;
}
.logo img{ height: 60px; padding-top:20px;
}
.menuIcon { font-family: 'Work Sans', sans-serif; font-size: 1.5em; color: #fafafa; background: #5389CE; text-decoration: none; display: block; padding: .75em; text-align: right;
}
.nav { margin: 0; background: #5389CE; text-align: center; display: none; z-index: 2;
}
.nav a { font-family: 'Work Sans', sans-serif; font-size: 26px; color: #fafafa; text-decoration: none; outline: 0;
}
.nav li { list-style: none; letter-spacing: .1em; padding: 2em 1em 2em 1em;
}
.selected { background: #5389CE;
}
.list { display: block; height:100vh;
}
@media screen and (max-width: 1200px) {
.logo img{ height: 50px; padding-top:10px;
}
}
@media screen and (min-width: 1200px) { .nav { font-size: 28px; padding: 0; left: 0; width: 100%; text-align: right; display: block; } .nav li { font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 700; list-style: none; display: inline-block; font-size: 1rem; letter-spacing: .1em; padding: 2em 1em 2em 1em; } .menuIcon { display: none; }
}Responsive Fixed Navigation Overlay Menu - Script Codes JS Codes
$(".menuIcon").click(function(event) { event.preventDefault(); $(".nav").toggleClass("list");
});
| Developer | Hayden Mills |
| Username | haydenmills |
| Uploaded | August 14, 2022 |
| Rating | 3 |
| Size | 2,700 Kb |
| Views | 24,288 |
Do you need developer help for Responsive Fixed Navigation Overlay Menu?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Hayden Mills (haydenmills) Script Codes
| Name | Size |
| Cool CSS Gradient Background | 1,589 Kb |
| Hover Over Image | 1,692 Kb |
| Responsive Image and Text Overlay | 2,121 Kb |
| Pop Out Modal | 3,892 Kb |
| Image with Text Hover Effect | 1,756 Kb |
| Pushy Nav | 4,425 Kb |
| Top Menu Fixed After Image | 2,393 Kb |
| Responsive full body border | 5,101 Kb |
| Responsive Navigation Bar | 2,729 Kb |
| JQuery Text Fade In | 1,812 Kb |
Create amazing Facebook ads with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Boxes | H3l1um | 2,563 Kb |
| RSW | JordanC | 3,726 Kb |
| Twinner Spinner II | Katydecorah | 2,974 Kb |
| Animated Logo | Shakdaniel | 2,672 Kb |
| Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
| ABVI Menu Discarded | Overdrivemachines | 3,607 Kb |
| Horizontal slider on scroll | Alojzije | 2,672 Kb |
| The CodePen Logo | Kindofone | 4,259 Kb |
| Loading animation | Codeams | 2,408 Kb |
| Minimal Menu | Achudars | 3,430 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!