Responvise design with sticky menu

Developer
Patrick Walburg
Size
3,238 Kb
Views
22,264
  1. Responvise design with sticky menu Previews
  2. Responvise design with sticky menu HTML Codes
  3. Responvise design with sticky menu CSS Codes

How do I make an responvise design with sticky menu?

Responvise design made with boilerplate and a sticky menu. What is a responvise design with sticky menu? How do you make a responvise design with sticky menu? This script and codes were developed by Patrick Walburg on 22 November 2022, Tuesday.

Responvise design with sticky menu Previews
IQ Test

Responvise design with sticky menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>responvise design with sticky menu</title> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="header-container"> <header class="wrapper clearfix"> <h1 class="title">h1.title</h1> <nav> <ul> <li><a href="#">nav ul li a</a></li> <li><a href="#">nav ul li a</a></li> <li><a href="#">nav ul li a</a></li> </ul> </nav> </header> </div> <div class="main-container"> <div class="main wrapper clearfix"> <article> <header> <h1>article header h1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p> </header> <section> <h2>article section h2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p> </section> <section> <h2>article section h2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p> </section> <footer> <h3>article footer h3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p> </footer> </article> <aside> <h3>aside</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p> </aside> </div> <!-- #main --> </div> <!-- #main-container --> <div class="footer-container"> <footer class="wrapper"> <h3>footer</h3> </footer> </div>
</body>
</body>
</html>

Responvise design with sticky menu - Script Codes CSS Codes

html,
button,
input,
select,
textarea { color: #222;
}
body { font-size: 1em; line-height: 1.4;
}
::-moz-selection { background: #A1FC58; text-shadow: none;
}
::selection { background: #A1FC58; text-shadow: none;
}
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;
}
img { vertical-align: middle;
}
fieldset { border: 0; margin: 0; padding: 0;
}
textarea { resize: vertical;
}
.chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0;
}
body { font: 16px/26px Helvetica, Helvetica Neue, Arial;
}
.wrapper { width: 90%; margin: 0 5%;
}
/* =================== ALL: Green Theme =================== */
.header-container { border-bottom: 20px solid #67A138;
}
.footer-container,
.main aside { border-top: 20px solid #67A138;
}
.header-container,
.footer-container,
.main aside { background: #74B53F;
}
.title { color: white;
}
/* ============== MOBILE: Menu ============== */
nav ul { margin: 0; padding: 0;
}
nav a { display: block; margin-bottom: 10px; padding: 15px 0px 5px 0px; text-align: center; text-decoration: none; font-weight: bold; color: white; background: #67A138;
}
nav a:hover,
nav a:visited { color: white;
}
nav a:hover { text-decoration: underline;
}
/* ============== MOBILE: Main ============== */
.main { padding: 30px 0; padding-top:100px;
}
.main article h1 { font-size: 2em;
}
.main aside { color: white; padding: 0px 5% 10px;
}
.footer-container footer { color: white; padding: 20px 0;
}
/* =============== ALL: IE Fixes =============== */
.ie7 .title { padding-top: 20px;
}
/* ================================================== Media Queries =============================================== */
@media only screen and (min-width: 480px) {
/* ==================== INTERMEDIATE: Menu ==================== */ nav a { float: left; width: 27%; margin: 0 1.7%; padding: 25px 2%; margin-bottom: 0; } nav li:first-child a { margin-left: 0; } nav li:last-child a { margin-right: 0; }
/* ======================== INTERMEDIATE: IE Fixes ======================== */ nav ul li { display: inline; } .oldie nav a { margin: 0 0.7%; }
}
@media only screen and (min-width: 768px) {
/* ==================== WIDE: CSS3 Effects ==================== */ .header-container, .main aside { -webkit-box-shadow: 0 5px 10px #aaa; -moz-box-shadow: 0 5px 10px #aaa; box-shadow: 0 5px 10px #aaa; }
/* ============ WIDE: Menu ============ */
.header-container { border-bottom: 20px solid #67A138; width:100%; height:70px; position:fixed; top:0px;
} .title { float: left; } nav { float: right; width: 38%; }
/* ============ WIDE: Main ============ */ .main article { float: left; width: 57%; } .main aside { float: right; width: 28%; }
}
@media only screen and (min-width: 1140px) {
/* =============== Maximal Width =============== */ .wrapper { width: 1026px; /* 1140px - 10% for margins */ margin: 0 auto; }
}
/* ========================================================================== Helper classes ========================================================================== */
.hidden { display: none !important; visibility: hidden;
}
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto;
}
.invisible { visibility: hidden;
}
.clearfix:before,
.clearfix:after { content: " "; display: table;
}
.clearfix:after { clear: both;
}
.clearfix { *zoom: 1;
}
Responvise design with sticky menu - Script Codes
Responvise design with sticky menu - Script Codes
Home Page Home
Developer Patrick Walburg
Username tripack
Uploaded November 22, 2022
Rating 3
Size 3,238 Kb
Views 22,264
Do you need developer help for Responvise design with sticky 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!

Patrick Walburg (tripack) Script Codes
Name
Banner-demo
Hamburger css
To do list
Rollovers with transitions.
Study in Knockout.js
Animation study
A Pen by Patrick Walburg
Voorbeeldcode
Cofee and sugar
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!