Simple Responsive Navigation
How do I make an simple responsive navigation?
A quick responsive navigation template built with less, flexbox and a little jQuery. Using less, users can easily customize the navigation to their needs. . What is a simple responsive navigation? How do you make a simple responsive navigation? This script and codes were developed by Brock Nunn on 06 January 2023, Friday.
Simple Responsive Navigation Previews
Simple Responsive Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Responsive Navigation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<meta name='viewport' content='width=device-width'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav id="nav" role='navigation'> <a class="clickr fontawesome-reorder"></a> <ul> <li class="active"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Clients</a></li> <li><a href="#">Contact Us</a></li> </ul>
</nav>
<div class="text">
<h1>Welcome To My Website!</h1>
<p>Feel free to use the responsive nav :)</p> photo credit: <a href="http://www.flickr.com/photos/wili/3156977955/">wili_hybrid</a> via <a href="http://photopin.com">photopin</a> <a href="http://creativecommons.org/licenses/by-nc/2.0/">cc</a>
</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>Simple Responsive Navigation - Script Codes CSS Codes
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400);
@font-face { font-family: 'FontAwesome'; font-style: normal; font-weight: normal; src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot'); src: url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.woff') format('woff'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.ttf') format('truetype'), url('http://weloveiconfonts.com/api/fonts/fontawesome/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
}
.fontawesome-glass:before { content: "\f000";
}
.fontawesome-music:before { content: "\f001";
}
.fontawesome-search:before { content: "\f002";
}
.fontawesome-envelope:before { content: "\f003";
}
.fontawesome-heart:before { content: "\f004";
}
.fontawesome-star:before { content: "\f005";
}
.fontawesome-star-empty:before { content: "\f006";
}
.fontawesome-user:before { content: "\f007";
}
.fontawesome-film:before { content: "\f008";
}
.fontawesome-th-large:before { content: "\f009";
}
.fontawesome-th:before { content: "\f00a";
}
.fontawesome-th-list:before { content: "\f00b";
}
.fontawesome-ok:before { content: "\f00c";
}
.fontawesome-remove:before { content: "\f00d";
}
.fontawesome-zoom-in:before { content: "\f00e";
}
.fontawesome-zoom-out:before { content: "\f010";
}
.fontawesome-off:before { content: "\f011";
}
.fontawesome-signal:before { content: "\f012";
}
.fontawesome-cog:before { content: "\f013";
}
.fontawesome-trash:before { content: "\f014";
}
.fontawesome-home:before { content: "\f015";
}
.fontawesome-file:before { content: "\f016";
}
.fontawesome-time:before { content: "\f017";
}
.fontawesome-road:before { content: "\f018";
}
.fontawesome-download-alt:before { content: "\f019";
}
.fontawesome-download:before { content: "\f01a";
}
.fontawesome-upload:before { content: "\f01b";
}
.fontawesome-inbox:before { content: "\f01c";
}
.fontawesome-play-circle:before { content: "\f01d";
}
.fontawesome-repeat:before { content: "\f01e";
}
.fontawesome-refresh:before { content: "\f021";
}
.fontawesome-list-alt:before { content: "\f022";
}
.fontawesome-lock:before { content: "\f023";
}
.fontawesome-flag:before { content: "\f024";
}
.fontawesome-headphones:before { content: "\f025";
}
.fontawesome-volume-off:before { content: "\f026";
}
.fontawesome-volume-down:before { content: "\f027";
}
.fontawesome-volume-up:before { content: "\f028";
}
.fontawesome-qrcode:before { content: "\f029";
}
.fontawesome-barcode:before { content: "\f02a";
}
.fontawesome-tag:before { content: "\f02b";
}
.fontawesome-tags:before { content: "\f02c";
}
.fontawesome-book:before { content: "\f02d";
}
.fontawesome-bookmark:before { content: "\f02e";
}
.fontawesome-print:before { content: "\f02f";
}
.fontawesome-camera:before { content: "\f030";
}
.fontawesome-font:before { content: "\f031";
}
.fontawesome-bold:before { content: "\f032";
}
.fontawesome-italic:before { content: "\f033";
}
.fontawesome-text-height:before { content: "\f034";
}
.fontawesome-text-width:before { content: "\f035";
}
.fontawesome-align-left:before { content: "\f036";
}
.fontawesome-align-center:before { content: "\f037";
}
.fontawesome-align-right:before { content: "\f038";
}
.fontawesome-align-justify:before { content: "\f039";
}
.fontawesome-list:before { content: "\f03a";
}
.fontawesome-indent-left:before { content: "\f03b";
}
.fontawesome-indent-right:before { content: "\f03c";
}
.fontawesome-facetime-video:before { content: "\f03d";
}
.fontawesome-picture:before { content: "\f03e";
}
.fontawesome-pencil:before { content: "\f040";
}
.fontawesome-map-marker:before { content: "\f041";
}
.fontawesome-adjust:before { content: "\f042";
}
.fontawesome-tint:before { content: "\f043";
}
.fontawesome-edit:before { content: "\f044";
}
.fontawesome-share:before { content: "\f045";
}
.fontawesome-check:before { content: "\f046";
}
.fontawesome-move:before { content: "\f047";
}
.fontawesome-step-backward:before { content: "\f048";
}
.fontawesome-fast-backward:before { content: "\f049";
}
.fontawesome-backward:before { content: "\f04a";
}
.fontawesome-play:before { content: "\f04b";
}
.fontawesome-pause:before { content: "\f04c";
}
.fontawesome-stop:before { content: "\f04d";
}
.fontawesome-forward:before { content: "\f04e";
}
.fontawesome-fast-forward:before { content: "\f050";
}
.fontawesome-step-forward:before { content: "\f051";
}
.fontawesome-eject:before { content: "\f052";
}
.fontawesome-chevron-left:before { content: "\f053";
}
.fontawesome-chevron-right:before { content: "\f054";
}
.fontawesome-plus-sign:before { content: "\f055";
}
.fontawesome-minus-sign:before { content: "\f056";
}
.fontawesome-remove-sign:before { content: "\f057";
}
.fontawesome-ok-sign:before { content: "\f058";
}
.fontawesome-question-sign:before { content: "\f059";
}
.fontawesome-info-sign:before { content: "\f05a";
}
.fontawesome-screenshot:before { content: "\f05b";
}
.fontawesome-remove-circle:before { content: "\f05c";
}
.fontawesome-ok-circle:before { content: "\f05d";
}
.fontawesome-ban-circle:before { content: "\f05e";
}
.fontawesome-arrow-left:before { content: "\f060";
}
.fontawesome-arrow-right:before { content: "\f061";
}
.fontawesome-arrow-up:before { content: "\f062";
}
.fontawesome-arrow-down:before { content: "\f063";
}
.fontawesome-share-alt:before { content: "\f064";
}
.fontawesome-resize-full:before { content: "\f065";
}
.fontawesome-resize-small:before { content: "\f066";
}
.fontawesome-plus:before { content: "\f067";
}
.fontawesome-minus:before { content: "\f068";
}
.fontawesome-asterisk:before { content: "\f069";
}
.fontawesome-exclamation-sign:before { content: "\f06a";
}
.fontawesome-gift:before { content: "\f06b";
}
.fontawesome-leaf:before { content: "\f06c";
}
.fontawesome-fire:before { content: "\f06d";
}
.fontawesome-eye-open:before { content: "\f06e";
}
.fontawesome-eye-close:before { content: "\f070";
}
.fontawesome-warning-sign:before { content: "\f071";
}
.fontawesome-plane:before { content: "\f072";
}
.fontawesome-calendar:before { content: "\f073";
}
.fontawesome-random:before { content: "\f074";
}
.fontawesome-comment:before { content: "\f075";
}
.fontawesome-magnet:before { content: "\f076";
}
.fontawesome-chevron-up:before { content: "\f077";
}
.fontawesome-chevron-down:before { content: "\f078";
}
.fontawesome-retweet:before { content: "\f079";
}
.fontawesome-shopping-cart:before { content: "\f07a";
}
.fontawesome-folder-close:before { content: "\f07b";
}
.fontawesome-folder-open:before { content: "\f07c";
}
.fontawesome-resize-vertical:before { content: "\f07d";
}
.fontawesome-resize-horizontal:before { content: "\f07e";
}
.fontawesome-bar-chart:before { content: "\f080";
}
.fontawesome-twitter-sign:before { content: "\f081";
}
.fontawesome-facebook-sign:before { content: "\f082";
}
.fontawesome-camera-retro:before { content: "\f083";
}
.fontawesome-key:before { content: "\f084";
}
.fontawesome-cogs:before { content: "\f085";
}
.fontawesome-comments:before { content: "\f086";
}
.fontawesome-thumbs-up:before { content: "\f087";
}
.fontawesome-thumbs-down:before { content: "\f088";
}
.fontawesome-star-half:before { content: "\f089";
}
.fontawesome-heart-empty:before { content: "\f08a";
}
.fontawesome-signout:before { content: "\f08b";
}
.fontawesome-linkedin-sign:before { content: "\f08c";
}
.fontawesome-pushpin:before { content: "\f08d";
}
.fontawesome-external-link:before { content: "\f08e";
}
.fontawesome-signin:before { content: "\f090";
}
.fontawesome-trophy:before { content: "\f091";
}
.fontawesome-github-sign:before { content: "\f092";
}
.fontawesome-upload-alt:before { content: "\f093";
}
.fontawesome-lemon:before { content: "\f094";
}
.fontawesome-phone:before { content: "\f095";
}
.fontawesome-check-empty:before { content: "\f096";
}
.fontawesome-bookmark-empty:before { content: "\f097";
}
.fontawesome-phone-sign:before { content: "\f098";
}
.fontawesome-twitter:before { content: "\f099";
}
.fontawesome-facebook:before { content: "\f09a";
}
.fontawesome-github:before { content: "\f09b";
}
.fontawesome-unlock:before { content: "\f09c";
}
.fontawesome-credit-card:before { content: "\f09d";
}
.fontawesome-rss:before { content: "\f09e";
}
.fontawesome-hdd:before { content: "\f0a0";
}
.fontawesome-bullhorn:before { content: "\f0a1";
}
.fontawesome-bell:before { content: "\f0a2";
}
.fontawesome-certificate:before { content: "\f0a3";
}
.fontawesome-hand-right:before { content: "\f0a4";
}
.fontawesome-hand-left:before { content: "\f0a5";
}
.fontawesome-hand-up:before { content: "\f0a6";
}
.fontawesome-hand-down:before { content: "\f0a7";
}
.fontawesome-circle-arrow-left:before { content: "\f0a8";
}
.fontawesome-circle-arrow-right:before { content: "\f0a9";
}
.fontawesome-circle-arrow-up:before { content: "\f0aa";
}
.fontawesome-circle-arrow-down:before { content: "\f0ab";
}
.fontawesome-globe:before { content: "\f0ac";
}
.fontawesome-wrench:before { content: "\f0ad";
}
.fontawesome-tasks:before { content: "\f0ae";
}
.fontawesome-filter:before { content: "\f0b0";
}
.fontawesome-briefcase:before { content: "\f0b1";
}
.fontawesome-fullscreen:before { content: "\f0b2";
}
.fontawesome-group:before { content: "\f0c0";
}
.fontawesome-link:before { content: "\f0c1";
}
.fontawesome-cloud:before { content: "\f0c2";
}
.fontawesome-beaker:before { content: "\f0c3";
}
.fontawesome-cut:before { content: "\f0c4";
}
.fontawesome-copy:before { content: "\f0c5";
}
.fontawesome-paper-clip:before { content: "\f0c6";
}
.fontawesome-save:before { content: "\f0c7";
}
.fontawesome-sign-blank:before { content: "\f0c8";
}
.fontawesome-reorder:before { content: "\f0c9";
}
.fontawesome-list-ul:before { content: "\f0ca";
}
.fontawesome-list-ol:before { content: "\f0cb";
}
.fontawesome-strikethrough:before { content: "\f0cc";
}
.fontawesome-underline:before { content: "\f0cd";
}
.fontawesome-table:before { content: "\f0ce";
}
.fontawesome-magic:before { content: "\f0d0";
}
.fontawesome-truck:before { content: "\f0d1";
}
.fontawesome-pinterest:before { content: "\f0d2";
}
.fontawesome-pinterest-sign:before { content: "\f0d3";
}
.fontawesome-google-plus-sign:before { content: "\f0d4";
}
.fontawesome-google-plus:before { content: "\f0d5";
}
.fontawesome-money:before { content: "\f0d6";
}
.fontawesome-caret-down:before { content: "\f0d7";
}
.fontawesome-caret-up:before { content: "\f0d8";
}
.fontawesome-caret-left:before { content: "\f0d9";
}
.fontawesome-caret-right:before { content: "\f0da";
}
.fontawesome-columns:before { content: "\f0db";
}
.fontawesome-sort:before { content: "\f0dc";
}
.fontawesome-sort-down:before { content: "\f0dd";
}
.fontawesome-sort-up:before { content: "\f0de";
}
.fontawesome-envelope-alt:before { content: "\f0e0";
}
.fontawesome-linkedin:before { content: "\f0e1";
}
.fontawesome-undo:before { content: "\f0e2";
}
.fontawesome-legal:before { content: "\f0e3";
}
.fontawesome-dashboard:before { content: "\f0e4";
}
.fontawesome-comment-alt:before { content: "\f0e5";
}
.fontawesome-comments-alt:before { content: "\f0e6";
}
.fontawesome-bolt:before { content: "\f0e7";
}
.fontawesome-sitemap:before { content: "\f0e8";
}
.fontawesome-umbrella:before { content: "\f0e9";
}
.fontawesome-paste:before { content: "\f0ea";
}
.fontawesome-lightbulb:before { content: "\f0eb";
}
.fontawesome-exchange:before { content: "\f0ec";
}
.fontawesome-cloud-download:before { content: "\f0ed";
}
.fontawesome-cloud-upload:before { content: "\f0ee";
}
.fontawesome-user-md:before { content: "\f0f0";
}
.fontawesome-stethoscope:before { content: "\f0f1";
}
.fontawesome-suitcase:before { content: "\f0f2";
}
.fontawesome-bell-alt:before { content: "\f0f3";
}
.fontawesome-coffee:before { content: "\f0f4";
}
.fontawesome-food:before { content: "\f0f5";
}
.fontawesome-file-alt:before { content: "\f0f6";
}
.fontawesome-building:before { content: "\f0f7";
}
.fontawesome-hospital:before { content: "\f0f8";
}
.fontawesome-ambulance:before { content: "\f0f9";
}
.fontawesome-medkit:before { content: "\f0fa";
}
.fontawesome-fighter-jet:before { content: "\f0fb";
}
.fontawesome-beer:before { content: "\f0fc";
}
.fontawesome-h-sign:before { content: "\f0fd";
}
.fontawesome-plus-sign-alt:before { content: "\f0fe";
}
.fontawesome-double-angle-left:before { content: "\f100";
}
.fontawesome-double-angle-right:before { content: "\f101";
}
.fontawesome-double-angle-up:before { content: "\f102";
}
.fontawesome-double-angle-down:before { content: "\f103";
}
.fontawesome-angle-left:before { content: "\f104";
}
.fontawesome-angle-right:before { content: "\f105";
}
.fontawesome-angle-up:before { content: "\f106";
}
.fontawesome-angle-down:before { content: "\f107";
}
.fontawesome-desktop:before { content: "\f108";
}
.fontawesome-laptop:before { content: "\f109";
}
.fontawesome-tablet:before { content: "\f10a";
}
.fontawesome-mobile-phone:before { content: "\f10b";
}
.fontawesome-circle-blank:before { content: "\f10c";
}
.fontawesome-quote-left:before { content: "\f10d";
}
.fontawesome-quote-right:before { content: "\f10e";
}
.fontawesome-spinner:before { content: "\f110";
}
.fontawesome-circle:before { content: "\f111";
}
.fontawesome-reply:before { content: "\f112";
}
.fontawesome-github-alt:before { content: "\f113";
}
.fontawesome-folder-close-alt:before { content: "\f114";
}
.fontawesome-folder-open-alt:before { content: "\f115";
}
/* fontawesome */
[class*="fontawesome-"]:before { font-family: 'FontAwesome', sans-serif;
}
body { font-family: lato; background: url(http://farm4.staticflickr.com/3088/3156977955_031c06623f_b.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}
#nav { width: 85%; background: rgba(49, 49, 49, 0.85); margin: 0 auto; margin-top: 2em; border-radius: .25em; overflow: auto;
}
@media (max-width: 40em) { #nav { width: 95%; }
}
#nav .clickr { color: #ccc; display: block; text-align: right; padding: .5em; font-size: 1.25em; display: none;
}
@media (max-width: 40em) { #nav .clickr { display: block; }
}
#nav ul { display: flex; align-items: stretch; margin: 0; padding: 0; flex-direction: row;
}
@media (max-width: 40em) { #nav ul { flex-direction: column; display: none; }
}
#nav ul li { list-style: none; align-items: stretch; flex: 1; text-align: center;
}
#nav ul li:first-child a { border-left: none;
}
#nav ul li:last-child a { border-right: none;
}
#nav ul li.active a { background: rgba(34, 34, 34, 0.55); border-bottom: 1px solid teal;
}
#nav ul li a { color: #ccc; text-transform: uppercase; text-decoration: none; text-shadow: 0px 1px 1px #000; font-weight: 200; padding: 1em 0; display: block; border-right: 1px solid rgba(0, 0, 0, 0.3); border-left: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 40em) { #nav ul li a { border-top: 1px solid rgba(0, 0, 0, 0.3); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
}
#nav ul li a:hover { background: rgba(34, 34, 34, 0.55); border-bottom: 1px solid tomato;
}
.text { color: #fff; font-weight: 200; text-align: center;
}
.text h1 { font-weight: 200; text-transform: uppercase; text-shadow: 0px 10px 0px rgba(0, 0, 0, 0.15);
}
.text a { color: #fff; text-decoration: none;
}
.text a:hover { text-decoration: underline;
}
Simple Responsive Navigation - Script Codes JS Codes
$('.clickr').click(function(){ $('#nav ul').slideToggle(300);
});
| Developer | Brock Nunn |
| Username | banunn |
| Uploaded | January 06, 2023 |
| Rating | 4.5 |
| Size | 5,885 Kb |
| Views | 4,048 |
Do you need developer help for Simple Responsive Navigation?
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!
Brock Nunn (banunn) Script Codes
| Name | Size |
| Pixel Perfect Buttons Without PSD | 3,828 Kb |
| Modern Web Button | 3,264 Kb |
| Learning Flexbox | 5,428 Kb |
| JQuery Add and Remove Items | 4,085 Kb |
| Angular Users Application | 5,151 Kb |
| Super Simple Slideshow | 2,639 Kb |
| Minimal Hover Menu | 3,203 Kb |
| Simple jQuery .fadeToggle demo | 2,394 Kb |
| Flat UI Alert | 3,325 Kb |
| A Pen by Brock Nunn | 2,557 Kb |
Create amazing marketing copy 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 |
| Barber Shop | Bhlaird | 6,270 Kb |
| HTM5 picture dropzone | Jaysalvat | 2,576 Kb |
| Toggling Divs with jQuery | Yying6 | 1,967 Kb |
| Resume | Rottingroom | 5,483 Kb |
| A Pen by Adrien Clerbois | AClerbois | 6,501 Kb |
| SVG Animation | Pollardld | 3,133 Kb |
| After America | Jonathangarner | 2,686 Kb |
| Video mute | Leon9208 | 2,131 Kb |
| Print element on a page | Mrs_snow | 2,081 Kb |
| Form Labels | Bartuc | 2,717 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!