Sticky Responsive Navigation
How do I make an sticky responsive navigation?
What is a sticky responsive navigation? How do you make a sticky responsive navigation? This script and codes were developed by Francesca Tabor on 10 July 2022, Sunday.
Sticky Responsive Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky Responsive Navigation</title> <link rel='stylesheet prefetch' href='http://www.conversantmedia.com/sites/all/themes/my_theme/css/MyFontsWebfontsKit-jobvite.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Raleway:700,400'>
<link rel='stylesheet prefetch' href='http://www.conversantmedia.com/sites/all/themes/my_theme/css/MyFontsWebfontsKit-jobvite.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--Flashing Text Introduction--> <div class="container"> <div class="textContainer"> <div class="jstext"></div> </div>
<!--Flashing Text Introduction END-->
<!--Sticky Navigation-->
<header class="main_h"> <div class="row"> <img src="http://i1301.photobucket.com/albums/ag118/francescatabor89/loft%20logo%20red.svg_zpsszzrsyek.png" alt="Logo image" width="26px" class="logo"> <div class="mobile-toggle"> <span></span> <span></span> <span></span> </div> <nav> <ul> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </div>
</header>
<!--Sticky Navigation END-->
<!--Intro Image Blur-->
<!--Intro Image Blur END-->
<!--Introduction-->
<div class="hero"> <h1><span>An innovation agency by technology experts</span><br>Digital Loft</h1> <div class="buttons"><button class="big-button">Learn More</button></div> </div>
</div>
<!--Introduction END-->
<div class="row content"> <h1 class="sec01">Section 01</h1> <p>We solve business, social and creative challenges by creating empowering technology. We believe in the future and we build it every day from our offices.</p> <h1 class="sec02">Section 02</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> <h1 class="sec03">Section 03</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p> <h1 class="sec04">Section 04</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, recusandae, at, labore velit eligendi amet nobis repellat natus sequi sint consectetur excepturi doloribus vero provident consequuntur accusamus quisquam nesciunt cupiditate soluta alias illo et deleniti voluptates facilis repudiandae similique dolore quaerat architecto perspiciatis officiis dolor ullam expedita suscipit neque minima rem praesentium inventore ab officia quos dignissimos esse quam placeat iste porro eius! Minus, aspernatur nesciunt consectetur. Sit, eius, itaque, porro, beatae impedit officia tenetur reiciendis autem vitae a quae ipsam repudiandae odio dolorum quaerat asperiores possimus corporis optio animi quisquam laboriosam nihil quam voluptatum quidem veritatis iste culpa iure modi perspiciatis recusandae ipsa libero officiis aliquam doloremque similique id quasi atque distinctio enim sapiente ratione in quia eum perferendis earum blanditiis. Nobis, architecto, veniam molestias minus iste necessitatibus est ab in earum ratione eveniet soluta molestiae sed illo nostrum nemo debitis. Minus, quod totam aliquam ea asperiores fugit quaerat excepturi dolores ratione numquam consequatur id unde alias provident vero incidunt exercitationem similique consequuntur hic possimus? Fuga, eveniet quaerat inventore corporis laborum eligendi enim soluta obcaecati aliquid veritatis provident amet laudantium est quisquam dolore exercitationem modi? Distinctio, pariatur, ab velit praesentium vitae quidem consequatur deleniti recusandae odit officiis. Quidem, cupiditate.</p>
</div> <script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Sticky Responsive Navigation - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=Raleway:700,400);
* { box-sizing: border-box;
}
body { color: #4d4d4d; background: white; font-family: Gibson-Semibold; font-weight: 300; -webkit-font-smoothing: antialiased;
}
a { text-decoration: none;
}
h1 { font-size: 30px; font-weight: 500; color: #DC143C; line-height: 1.8; text-transform: uppercase;
}
p { margin-bottom: 20px; font-size: 18px; line-height: 32px; letter-spacing: 0.1px; font-family: Gibson-Semibold;
}
.content { padding: 50px 2% 250px;
}
/* ------------------------------- STICKY NAVIGATION
----------------------------------*/
.main_h { position: fixed; top: 0px; max-height: 70px; z-index: 999; width: 100%; padding-top: 10px; background: none; overflow: hidden; -webkit-transition: all 0.3s; transition: all 0.3s; opacity: 2; top: -100px; padding-bottom: 6px; font-family: 'Raleway', sans-serif; font-weight: 200; letter-spacing: 2px;
}
@media only screen and (max-width: 766px) { .main_h { padding-top: 25px; }
}
.open-nav { max-height: 400px !important;
}
.open-nav .mobile-toggle { transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
}
.sticky { background-color: rgba(255, 255, 255, 0.93); opacity: 1; top: 0px; border-bottom: 1px solid gainsboro;
}
.logo { width: 50px; float: left; display: block; margin-top: 0; line-height: 2; margin-bottom: 10px;
}
@media only screen and (max-width: 766px) { .logo { float: none; }
}
nav { float: right; width: 60%;
}
@media only screen and (max-width: 766px) { nav { width: 100%; }
}
nav ul { list-style: none; overflow: hidden; text-align: right; float: right;
}
@media only screen and (max-width: 766px) { nav ul { padding-top: 10px; margin-bottom: 22px; float: left; text-align: center; width: 100%; }
}
nav ul li { display: inline-block; margin-left: 35px; line-height: 1.5;
}
@media only screen and (max-width: 766px) { nav ul li { width: 100%; padding: 7px 0; margin: 0; }
}
nav ul a { color: #888888; text-transform: uppercase; font-size: 20px; letter-spacing: 2px;
}
nav ul li a:hover { font-weight: 700; color: #DC143C;
}
.mobile-toggle { display: none; cursor: pointer; font-size: 20px; position: absolute; right: 22px; top: 0; width: 30px; -webkit-transition: all 200ms ease-in; -moz-transition: all 200ms ease-in; transition: all 200ms ease-in;
}
@media only screen and (max-width: 766px) { .mobile-toggle { display: block; }
}
.mobile-toggle span { width: 30px; height: 4px; margin-bottom: 6px; border-radius: 1000px; background: #8f8f8f; display: block;
}
.row { width: 100%; max-width: 940px; margin: 0 auto; position: relative; padding: 0 2%;
}
/* ------------------------------- FLASHING TEXT INTRODUCTION
----------------------------------*/
body, html { height: 100%; color: white; font-family: 'Raleway', sans-serif; -webkit-transition: background 20s linear; -moz-transition: background 20s linear; -ms-transition: background 20s linear; -o-transition: background 20s linear; transition: background 20s linear;
}
.noTransition body { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
.noTransition .loopCol { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
.noTransition .fixedBg { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none;
}
* { box-sizing: border-box;
}
a { text-decoration: none; color: white;
}
.container { max-width: 90%; z-index: 1; margin: 0 auto; padding-bottom: 50px;
}
.textContainer { position: relative; text-align: left; font-size: 80px; font-family: 'Raleway', sans-serif; font-weight: 600; color: #fff; letter-spacing: -0.15vw; line-height: 1.05; min-height: 88vh;
}
.jstext { width: 100%; padding-top: 12vh; padding-right: 50px;
}
.jstext:after { content: "_"; animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; -webkit-animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; -moz-animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; -o-animation: sliding 2s 0.3s 1 forwards, blinking 2s 2s infinite forwards; position: absolute; -webkit-transform: translate(10%, -10%); -moz-transform: translate(10%, -10%); -ms-transform: translate(10%, -10%); transform: translate(10%, -10%); overflow: hidden; width: 0px;
}
.text { color: #46200A;
}
@keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@-webkit-keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@-moz-keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@-o-keyframes sliding { 0% { width: 0px; } 100% { width: 100px; }
}
@keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-webkit-keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-moz-keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
@-o-keyframes blinking { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; }
}
/*** MEDIA QUERIES ***/
@media all and (max-width: 1024px) { .textContainer { min-height: 75vh; }
}
@media all and (max-width: 768px) { #brName { display: block; } .textContainer { min-height: 80vh; font-size: 11.2vw; letter-spacing: -.45vw; } .jstext { padding-right: 0px; }
}
@media all and (max-width: 468px) { .textContainer { min-height: 80vh; font-size: 11.4vw; letter-spacing: -.45vw; } .jstext { padding-right: 0px; }
}
/* ------------------------------- INTRODUCTION
----------------------------------*/
.hero { position: relative; background: url(http://i1301.photobucket.com/albums/ag118/francescatabor89/9k-1_zpsdsnfiusb.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; text-align: center; color: #fff; padding-top: 110px; min-height: 500px; letter-spacing: 2px; font-family: Gibson-Semibold;
}
.hero h1 { font-size: 50px; line-height: 1.3;
}
.hero h1 span { font-size: 25px; border-bottom: 2px solid red; padding-bottom: 12px; line-height: 3;
}
.intorduction .buttons { color: white; text-align: center;
}
button { width: 9.688rem; background-color: #f15a29; border-color: #f15a29; text-shadow: none; border-style: none; border-radius: 4px; padding: 1rem 1.5rem; color: white; font-size: 1.125rem; display: block;
}
button:hover { background-color: #d9400e; border-color: #cf3d0e; cursor: pointer;
}
.big-button { text-shadow: none; border-style: none; border-radius: 4px; padding: 16px 26px; line-height: 1.5rem; margin: 2rem auto;
}
/* ------------------------------- INTRO IMAGE BLUR
----------------------------------*/
Sticky Responsive Navigation - Script Codes JS Codes
// Sticky Navigation //
$(window).scroll(function() { if ($(window).scrollTop() > 100) { $('.main_h').addClass('sticky'); } else { $('.main_h').removeClass('sticky'); }
});
// Mobile Navigation
$('.mobile-toggle').click(function() { if ($('.main_h').hasClass('open-nav')) { $('.main_h').removeClass('open-nav'); } else { $('.main_h').addClass('open-nav'); }
});
$('.main_h li a').click(function() { if ($('.main_h').hasClass('open-nav')) { $('.navigation').removeClass('open-nav'); $('.main_h').removeClass('open-nav'); }
});
// navigation scroll lijepo radi materem
$('nav a').click(function(event) { var id = $(this).attr("href"); var offset = 70; var target = $(id).offset().top - offset; $('html, body').animate({ scrollTop: target }, 500); event.preventDefault();
});
/*Flashing Text Introduction*/
/* ----------------------- GLOBALS
-------------------------*/
var sections = [ { sentence: " building a smarter digital future" }, { sentence: " transforming global organisations" }, { sentence: " kickstarting multi-million pound startups" }, { sentence: "wants to hear from you" } ];
var i = 0;
var j = 0;
var k = 0;
var lengthSentence = 0;
var lengthArray = sections.length;
var forward = true;
var beginning = "Digital Loft<br> is";
var currentPart = "";
var interval = 50; // interval letter
var opening = false;
var pauseEnd = 2500; // pause end sentence
/* ----------------------- TYPING
-------------------------*/
function writing(text){ lengthSentence = sections[i].sentence.length; var body = $("body"); if(!opening){ // first part setTimeout(function(){ if(k < beginning.length){ if(beginning[k] === "<"){ currentPart += ' <br id="brName">'; k=k+4; } currentPart += beginning[k]; text.html(currentPart); k++; writing(text); }else if(k === (beginning.length)){ currentPart += " <br>"; text.html(currentPart); opening = true; writing(text); } },interval); }else if(opening){ // sentences setTimeout(function(){ interval = 50; if(j === lengthSentence){ forward = false; } if(j === lengthSentence-2){ $(".original").one().addClass("onScreen"); } if( j === lengthSentence-1 && forward){ interval = pauseEnd; } if(j < lengthSentence && forward ){ if(sections[i].sentence[j] === "&"){ currentPart += "<strong>"; }else if(sections[i].sentence[j] === "%"){ currentPart += "</strong>"; } else{ currentPart += sections[i].sentence[j]; } text.html(currentPart); j++; }else if(j > 0 && !forward){ if(sections[i].sentence[j] === "&"){ currentPart = currentPart.slice(0, - 8); }else if(sections[i].sentence[j] === "%"){ currentPart = currentPart.slice(0, - 9); } else{ currentPart = currentPart.slice(0, - 1); } text.html(currentPart); j--; }else if(j === 0){ forward = true; i++; } if(i === lengthArray){ i = 0; } writing(text); }, interval); }
}
/* ----------------------- BACKGROUND LOOP
-------------------------*/
function rand(min, max) { return min + Math.random() * (max - min);
}
function changebackground(){ var body = $("body"); var h = rand(1, 360); var s = rand(80, 90); var l = rand(50, 60); body.css({ // looping background "background" : "hsl(" + h + "," + s + "%,"+ l + "%)" });
}
/* ----------------------- NOOB SHIT
-------------------------*/
$(document).ready(function(){ /*-------------------- BACKGROUND STUFF ----------------------*/ changebackground(); setTimeout(function(){ $("html").removeClass("noTransition"); $("fixedBg").removeClass("noTransition"); changebackground(); }, 2000) setInterval(function(){ changebackground(); }, 20000); /*-------------------- TYPING ----------------------*/ var firstTimer = 8000; var text = $(".jstext"); setTimeout(function(){ writing(text); }, firstTimer);
});
/*Flashing Text Introduction END*/
Developer | Francesca Tabor |
Username | ftabor |
Uploaded | July 10, 2022 |
Rating | 3 |
Size | 8,456 Kb |
Views | 32,384 |
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!
Name | Size |
Loft - Home v3 | 39,069 Kb |
Structure | 27,813 Kb |
Homepage Theme | 7,818 Kb |
Preloader | 1,821 Kb |
Loft - About Page | 23,256 Kb |
Loft Footer | 4,416 Kb |
Loft - Case Study | 33,456 Kb |
Timeline | 44,757 Kb |
Fullscreen HTML5 Page Background Video | 2,469 Kb |
Loft - Home | 37,131 Kb |
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!
Name | Username | Size |
Horizontal slider on scroll | Alojzije | 2,672 Kb |
Gradients | Karpovsystems | 2,394 Kb |
Simple Flat Menu | Jeplaa | 2,467 Kb |
Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
Scroll Arrow | Robooneus | 4,437 Kb |
Minimal Menu | Achudars | 3,430 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Pomodoro Clock | Osycon | 3,705 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
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!