Travel Blog Design with Sticky Nav and Sidebar
How do I make an travel blog design with sticky nav and sidebar?
A sample blog design with a full bleed header image and a navbar that sticks when you scroll. The sidebar is also sticky on scroll.. What is a travel blog design with sticky nav and sidebar? How do you make a travel blog design with sticky nav and sidebar? This script and codes were developed by Brian Haferkamp on 10 October 2022, Monday.
Travel Blog Design with Sticky Nav and Sidebar Previews
Travel Blog Design with Sticky Nav and Sidebar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Travel Blog Design with Sticky Nav and Sidebar</title> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Average+Sans|Open+Sans:400,400i,800" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="masthead"> <h1> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam natus aliquid dolorum, consequatur nulla fugit.</h1>
</header>
<header id="top-header"> <div id="branding"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/combat-1300519_640.png"/></div> <nav id="main-menu"> <ul><a href=""> <li>Link 1</li></a><a href=""> <li>Link 2</li></a><a href=""> <li>Link 3</li></a></ul> </nav>
</header>
<div id="mobile-trigger-open"> <p><i class="zmdi zmdi-chevron-left"></i></p>
</div>
<main> <section id="articles-container"> <!-- Article 1--> <header class="article-header"> <h1>Article Title: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1> </header> <article><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/pzad5uaz49e-oskar-krawczyk.jpg"/> <article class="article"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sequi praesentium, sint earum error porro ut necessitatibus ullam, aut dolorem quibusdam laborum reprehenderit, natus modi dolore inventore hic veniam labore.</p> <aside class="more-trigger"> <p>Read More</p> </aside> <article class="more"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A enim nobis aliquid et accusantium. Necessitatibus hic quam voluptas pariatur sed architecto officia dignissimos error quaerat dicta. Id recusandae autem modi voluptatum veniam, inventore nostrum deleniti, dignissimos temporibus distinctio corporis sunt non fugit illo nihil velit at reprehenderit ullam quisquam. Exercitationem.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat animi minus ad eius dignissimos nostrum necessitatibus ab dicta est totam.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus in facere sint tempora velit eaque consectetur recusandae quaerat natus ut quibusdam quos numquam nemo amet sequi officia expedita quam iure ducimus nisi asperiores explicabo a, aliquam consequuntur! Atque nulla quasi quidem corporis accusantium, placeat iusto obcaecati quae iure optio ab?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa tempore fugit, sunt obcaecati esse adipisci assumenda quibusdam doloribus doloremque consectetur nihil molestiae neque suscipit maxime, aut accusamus est molestias iusto.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, illum sequi rem. Quisquam sed blanditiis, magni dolor, saepe laborum aspernatur consectetur officiis doloribus! Eum nobis, illo placeat accusamus. Tempore eum explicabo odit eos, voluptate modi similique saepe in, fuga facilis impedit excepturi omnis unde, doloremque ipsa ducimus sit dolore ipsum?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio odit mollitia rerum saepe iste sequi voluptates eligendi sint tenetur. Officiis quis doloribus asperiores corporis praesentium dolorum molestiae quisquam velit eaque nisi, dignissimos magni vitae rem, dolor? Qui cumque nihil omnis!</p> </article> </article> </article> <hr/> <!-- Article 2--> <header class="article-header"> <h1>Article Title: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1> </header> <article><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/esawhr5fhn8-oskar-krawczyk.jpg"/> <article class="article"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sequi praesentium, sint earum error porro ut necessitatibus ullam, aut dolorem quibusdam laborum reprehenderit, natus modi dolore inventore hic veniam labore.</p> <aside class="more-trigger"> <p>Read More</p> </aside> <article class="more"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A enim nobis aliquid et accusantium. Necessitatibus hic quam voluptas pariatur sed architecto officia dignissimos error quaerat dicta. Id recusandae autem modi voluptatum veniam, inventore nostrum deleniti, dignissimos temporibus distinctio corporis sunt non fugit illo nihil velit at reprehenderit ullam quisquam. Exercitationem.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat animi minus ad eius dignissimos nostrum necessitatibus ab dicta est totam.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus in facere sint tempora velit eaque consectetur recusandae quaerat natus ut quibusdam quos numquam nemo amet sequi officia expedita quam iure ducimus nisi asperiores explicabo a, aliquam consequuntur! Atque nulla quasi quidem corporis accusantium, placeat iusto obcaecati quae iure optio ab?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa tempore fugit, sunt obcaecati esse adipisci assumenda quibusdam doloribus doloremque consectetur nihil molestiae neque suscipit maxime, aut accusamus est molestias iusto.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, illum sequi rem. Quisquam sed blanditiis, magni dolor, saepe laborum aspernatur consectetur officiis doloribus! Eum nobis, illo placeat accusamus. Tempore eum explicabo odit eos, voluptate modi similique saepe in, fuga facilis impedit excepturi omnis unde, doloremque ipsa ducimus sit dolore ipsum?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio odit mollitia rerum saepe iste sequi voluptates eligendi sint tenetur. Officiis quis doloribus asperiores corporis praesentium dolorum molestiae quisquam velit eaque nisi, dignissimos magni vitae rem, dolor? Qui cumque nihil omnis!</p> </article> </article> </article> <hr/> <!-- Article 3--> <header class="article-header"> <h1>Article Title: Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1> </header> <article><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/i2-rentbpku-oskar-krawczyk.jpg"/> <article class="article"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis sequi praesentium, sint earum error porro ut necessitatibus ullam, aut dolorem quibusdam laborum reprehenderit, natus modi dolore inventore hic veniam labore.</p> <aside class="more-trigger"> <p>Read More</p> </aside> <article class="more"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. A enim nobis aliquid et accusantium. Necessitatibus hic quam voluptas pariatur sed architecto officia dignissimos error quaerat dicta. Id recusandae autem modi voluptatum veniam, inventore nostrum deleniti, dignissimos temporibus distinctio corporis sunt non fugit illo nihil velit at reprehenderit ullam quisquam. Exercitationem.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat animi minus ad eius dignissimos nostrum necessitatibus ab dicta est totam.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus in facere sint tempora velit eaque consectetur recusandae quaerat natus ut quibusdam quos numquam nemo amet sequi officia expedita quam iure ducimus nisi asperiores explicabo a, aliquam consequuntur! Atque nulla quasi quidem corporis accusantium, placeat iusto obcaecati quae iure optio ab?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa tempore fugit, sunt obcaecati esse adipisci assumenda quibusdam doloribus doloremque consectetur nihil molestiae neque suscipit maxime, aut accusamus est molestias iusto.</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, illum sequi rem. Quisquam sed blanditiis, magni dolor, saepe laborum aspernatur consectetur officiis doloribus! Eum nobis, illo placeat accusamus. Tempore eum explicabo odit eos, voluptate modi similique saepe in, fuga facilis impedit excepturi omnis unde, doloremque ipsa ducimus sit dolore ipsum?</p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio odit mollitia rerum saepe iste sequi voluptates eligendi sint tenetur. Officiis quis doloribus asperiores corporis praesentium dolorum molestiae quisquam velit eaque nisi, dignissimos magni vitae rem, dolor? Qui cumque nihil omnis!</p> </article> </article> </article> </section> <aside id="sidebar"> <div id="mobile-trigger-close"> <p><i class="zmdi zmdi-close"></i></p> </div> <div class="widget" id="element-1"> <h4>Widget Title</h4><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/rrun5qcje_s-daryan-shamkhali.jpg"/> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus voluptates ad recusandae iste! Ex corrupti exercitationem voluptates eius quisquam! Omnis!</p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/c6dbtf4qf9u-sven-scheuermeier.jpg"/> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus voluptates ad recusandae iste! Ex corrupti exercitationem voluptates eius quisquam! Omnis!</p> </div> <div class="widget" id="element-2"> <h4>Widget Title</h4> <ul> <li> <a class="alt-link" href="">Some link goes here</a></li> <li> <a class="alt-link" href="">Some link goes here</a></li> <li> <a class="alt-link" href="">Some link goes here</a></li> </ul> </div> <div class="widget" id="element-3"> <h4>Widget Title</h4> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum non, libero deleniti tempore delectus laborum?</p><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/bfezchfpm2i-igor-ovsyannykov.jpg"/><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/kg71bxh8kfw-raybay.jpg"/> </div> </aside>
</main>
<div id="overlay"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Travel Blog Design with Sticky Nav and Sidebar - Script Codes CSS Codes
body { margin: 0; height: 100vh; font-family: "Open Sans", sans-serif; overflow-x: hidden; z-index: 1;
}
p { font-family: "Average Sans", sans-serif; color: #222;
}
#masthead { background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/2fgvaqx-fxs-oskar-krawczyk.jpg); background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/495197/2fgvaqx-fxs-oskar-krawczyk.jpg); background-size: cover; background-position: center; height: 100vh; position: relative;
}
#masthead h1 { font-size: 2rem; line-height: 1; text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); position: absolute; bottom: 2rem; right: 2rem; width: 80%; font-family: "Open Sans", sans-serif; font-weight: 800; color: white; text-align: right;
}
@media (min-width: 900px) { #masthead h1 { font-size: 2.5rem; width: 50%; }
}
@media (min-width: 1200px) { #masthead h1 { font-size: 3rem; width: 30%; }
}
.logo { position: absolute; top: 1rem; left: 1rem;
}
.logo img { width: 60px;
}
#top-header { background-color: #C7320D; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 1rem; z-index: 30;
}
#branding { -webkit-box-flex: 0; -ms-flex: 0 1 20%; flex: 0 1 20%;
}
#branding img { width: 30px;
}
#main-menu { -webkit-box-flex: 1; -ms-flex: 1 0 20%; flex: 1 0 20%;
}
#main-menu ul { list-style: none; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end;
}
#main-menu ul li { margin-left: 1.5rem;
}
#main-menu a { color: #222; text-decoration: none; text-transform: uppercase;
}
#main-menu a:hover { color: rgba(34, 34, 34, 0.6);
}
main { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative;
}
#articles-container { margin: 0 auto; padding: 2rem 0.5rem 2rem 1rem; position: absolute; left: 0; top: 0;
}
#articles-container img { width: 100%;
}
@media (min-width: 900px) { #articles-container { width: 70vw; }
}
.article-header h1 { font-size: 2rem; color: #222222; margin: 2rem 0; line-height: 1; font-weight: 900; letter-spacing: -2px;
}
.article-header h2 { font-size: 1.1rem; color: rgba(34, 34, 34, 0.8); line-height: 1.2; font-style: italic; margin: 0 0 2rem; font-weight: 400;
}
@media (min-width: 500px) { .article-header h1 { font-size: 4rem; color: #222222; margin: 3rem 0 2rem; line-height: 1; font-weight: 900; letter-spacing: -4px; } .article-header h2 { font-size: 1.5rem; color: rgba(34, 34, 34, 0.8); line-height: 1; font-style: italic; margin: 0 0 3rem; font-weight: 400; }
}
.byline p { color: rgba(34, 34, 34, 0.6);
}
.article p { font-size: 1.1rem;
}
@media (min-width: 1200px) { .article p { font-size: 1.3rem; }
}
@media (min-width: 500px) { .article { padding-top: 2rem; }
}
#sidebar { display: none; width: 75vw; height: 95vh; overflow-y: auto; position: absolute; right: -80vw; top: -3.2rem; background: #fff; padding: 0; -webkit-transition: all 200ms ease; transition: all 200ms ease; z-index: 25;
}
#sidebar img { width: 100%;
}
#sidebar h4 { padding: 1rem; background: #222; margin: 0; color: white; letter-spacing: 1px; font-weight: 400;
}
@media (min-width: 900px) { #sidebar { display: block; width: 25vw; right: 0; }
}
#element-1 p { margin: 1rem 0 1.5rem;
}
#element-2 ul { list-style: none;
}
.widget { margin-bottom: 3rem; min-height: 200px;
}
.widget:nth-child(odd) { background: #eee; color: #222;
}
.widget ul,
.widget p { padding: 0 0.5rem;
}
hr { margin: 3rem 0; padding: 0; border: 1px solid #efefef;
}
.more-trigger { cursor: pointer; padding: 0 1rem; border: 1px solid rgba(199, 50, 13, 0.5); border-radius: 5px; -webkit-transition: all 200ms ease; transition: all 200ms ease;
}
.more-trigger:hover { border-color: #C7320D;
}
.more-trigger p { color: #C7320D;
}
#mobile-trigger-open { width: 100%; font-size: 2rem; cursor: pointer; position: absolute; z-index: 50; right: 0; text-align: right;
}
#mobile-trigger-open p { margin: 0; padding-right: 2rem;
}
@media (min-width: 900px) { #mobile-trigger-open, #mobile-trigger-close { display: none; }
}
#mobile-trigger-close { font-size: 1.5rem; cursor: pointer;
}
#mobile-trigger-close p { padding: 0.5rem; margin: 0;
}
#overlay { height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; z-index: 10;
}
Travel Blog Design with Sticky Nav and Sidebar - Script Codes JS Codes
var windowSize = $(window).height();
$(window).scroll(function() { if ($(window).scrollTop() > windowSize) { $('#sidebar').css({ 'position' : 'fixed', 'top': '0' }); $('#top-header').css({ 'position' : 'fixed', 'top': '0', 'width' : '98%', 'box-shadow' : '0px 0px 10px 0px rgba(0, 0, 0, 0.2)' }); $('#mobile-trigger-open').css({ 'position' : 'fixed', 'top' : '3.4rem', 'background' : 'rgba(255, 255, 255, 0.7)', 'width' : '100%' }); } else { $('#sidebar').css({ 'position' : 'absolute', 'margin-top': '3.2rem' }); $('#top-header').css({ 'position' : 'relative', 'box-shadow' : 'none' }); $('#mobile-trigger-open').css({ 'position' : 'absolute', 'top' : 'initial', 'background' : 'transparent' }); }
});
$('.more, .more-trigger-close, #overlay').hide();
$('.more-trigger').on('click', function() { $(this).slideUp(200); $(this).next('.more').slideDown();
});
$('#mobile-trigger-open').on('click', function() { $('#overlay').show(); $('#sidebar').show().animate({ 'right' : '0', 'top' : '0' }).css({ 'box-shadow' : '0px 0px 10px 0px rgba(0, 0, 0, 0.6)' }); $('#mobile-trigger-open').hide();
});
$('#overlay, #mobile-trigger-close').on('click', function() { $('#sidebar').show().animate({ 'right' : '-80vw' }, 300); $('#overlay').fadeOut( 300 ); setTimeout(function() { $('#mobile-trigger-open').fadeIn(); }, 300);
});
| Developer | Brian Haferkamp |
| Username | brianhaferkamp |
| Uploaded | October 10, 2022 |
| Rating | 4 |
| Size | 8,383 Kb |
| Views | 14,168 |
Do you need developer help for Travel Blog Design with Sticky Nav and Sidebar?
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!
Brian Haferkamp (brianhaferkamp) Script Codes
| Name | Size |
| Brutal, Bro | 6,575 Kb |
| RADIOLOGY | 2,751 Kb |
| Emoji-Driven Survey | 5,710 Kb |
| Creating a CSS Flexbox Grid | 2,022 Kb |
| Brutalism Web Design School | 7,231 Kb |
| 2-Up Magazine Layout | 8,250 Kb |
| Follow Your Heart | 4,964 Kb |
| Gradient Transitions Between Sections | 3,329 Kb |
| Full-Width Hero with Image Using Flexbox | 2,459 Kb |
| System Fonts Can Be Beautiful | 7,239 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 |
| 03 - CSS Variables | Run-time | 2,682 Kb |
| Simple Login Form | JoshBlackwood | 4,418 Kb |
| Highbrow Basic HTML Lesson 7 | Kimlarocca | 1,662 Kb |
| Sticky menu on scroll | Senff | 2,869 Kb |
| Fun form with currentColor | Bnthor | 2,713 Kb |
| ASCII triangle image overlay | Mitchdot | 2,200 Kb |
| Chuck Norris Background | Manz | 1,967 Kb |
| Blackberry Mock | Zacharyolson | 1,865 Kb |
| Process Accordion | Devilskitchen | 31,432 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 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!