Responsive Flexbox Nav
How do I make an responsive flexbox nav?
What is a responsive flexbox nav? How do you make a responsive flexbox nav? This script and codes were developed by Ken Yiu on 18 November 2022, Friday.
Responsive Flexbox Nav - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive Flexbox Nav</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<header> <div id="logo-container"> <a href="index.html"> <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" /> </a> </div> <nav> <a href="#">HOME</a> <a href="#">ABOUT</a> <a href="#">WORKS</a> <a href="#">SERVICES</a> <a href="#">BLOG</a> <a href="#">CONTACT</a> </nav>
</header>
<section id="works"> <div class="work"></div><div class="work"></div><div class="work"></div>
</section>
<section id="flex-works"> <div class="flex-work"><h1>Project A</h1></div> <div class="flex-work"><h1>Project B</h1></div> <div class="flex-work"><h1>Project C</h1></div>
</section>
<footer></footer>
</body>
</body>
</html>
Responsive Flexbox Nav - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
body { margin: 0; font-family: 'Roboto', sans-serif;
}
h1 { margin: 0; }
a { color: #333; text-decoration: none;
}
div#logo-container { width: 100px;
}
div#logo-container img { width: 100%; display: block; margin: 0 auto;
}
header, nav { display: -webkit-flex; display: flex;
}
header { background-color: #CCC; padding: 20px; justify-content: space-between; flex: 1;
}
nav { justify-content: flex-end; align-self: center;
}
nav a { width: 100px; text-align: center;
}
nav a:hover { color: #FF0000;
}
section#works { margin: 0; padding: 0; font-size: 0;
}
div.work { display: inline-block; width: 33.3333%; height: 400px; background-color: #666; margin: 0;
}
div.work:nth-child(even) { background-color: #333;
}
#flex-works { display: -webkit-flex; display: flex; flex-direction: row; flex-wrap: wrap;
}
.flex-work { position: relative; flex-basis: 33.33333%; height: 200px; background-color: #FF0; padding: 0;
}
.flex-work h1 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin-right: -50%; padding: 0;
}
@media screen and (max-width: 768px)
{ header { flex-direction: column; } div#logo-container { width: 100%; } div#logo-container img { width: 100px; margin-bottom: 20px; }
}
@media screen and (max-width: 480px) { header, nav { flex-direction: column; } div.work { width: 50%; } div.flex-work { flex-basis: 50%; }
}
Developer | Ken Yiu |
Username | kenyiu |
Uploaded | November 18, 2022 |
Rating | 3 |
Size | 2,236 Kb |
Views | 14,168 |
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 |
JQuery scrollTop sticky header | 2,776 Kb |
RWD-ISD-A-FullPage Start Kit | 10,685 Kb |
A Pen by Ken Yiu | 2,456 Kb |
Dynamic Content Panel | 2,194 Kb |
RWD-B Class02 | 1,415 Kb |
RWD-ISD-A-Class05 | 2,261 Kb |
RWD-ISD-ClassA-9A | 1,899 Kb |
Jquery mousemove animation | 2,071 Kb |
RWD-ISD-B-Class4b | 1,882 Kb |
RWD-B Class3b | 1,552 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 |
Pattern lab logo | TimPietrusky | 3,666 Kb |
CSS Colors | Alexpate | 2,232 Kb |
Import shader in three.js | Khangeldy | 2,636 Kb |
React JS Movie Info App | MTushar | 4,870 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
A Pen by Xand0r | Xand0r | 1,928 Kb |
Template | Indra_z85 | 2,323 Kb |
STIKHOI | Denmch | 7,122 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Brown by pure CSS, no image, no javascript | Aaronchuo | 2,652 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!