Flexbox Navigation
How do I make an flexbox navigation?
What is a flexbox navigation? How do you make a flexbox navigation? This script and codes were developed by Daniel Ilse on 01 November 2022, Tuesday.
Flexbox Navigation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox Navigation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header> <nav id="nav"> <a class="logo" href="#">CodePen</a> <a class="nav-item" href="#">Stories</a> <a class="nav-item" href="#">Explore</a> <a class="nav-item" href="#">Notifications</a> <a class="nav-item" href="#">Profile</a> </nav>
</header>
</body>
</html>
Flexbox Navigation - Script Codes CSS Codes
#nav { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 20px 0;
}
#nav .nav-item { position: relative; padding: 5px 0; margin: 0 10px; font-size: 1.125em; font-weight: 700; color: #333; text-decoration: none; text-transform: uppercase;
}
#nav .nav-item:before { content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: #333; -webkit-transition: width .5s ease; transition: width .5s ease;
}
#nav .nav-item:hover:before { width: 100%;
}
#nav .logo { display: block; overflow: hidden; height: 100px; width: 200px; margin-right: auto; white-space: nowrap; text-indent: 200%; background-image: url("https://blog.codepen.io/wp-content/uploads/2012/06/Black-Large.png"); background-position: center center; background-repeat: no-repeat; background-size: contain;
}
Developer | Daniel Ilse |
Username | dantilse |
Uploaded | November 01, 2022 |
Rating | 3 |
Size | 2,420 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 |
Definition List Exploration | 3,829 Kb |
Hamburger Menu Icon Sass Mixin | 2,103 Kb |
Multiple backgrounds for line items in SCSS | 3,191 Kb |
Team Members | 3,960 Kb |
Portfolio Filter using jQuery | 4,216 Kb |
Matt Goad Artspace Logo | 2,758 Kb |
Basic Nav Example | 3,459 Kb |
Responsive triangles with pseudo content | 2,658 Kb |
CSS Logo for Redeffect Abesso Furniture | 2,851 Kb |
Profile Card with Gradient Background Animation | 4,935 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 |
Bootstrap example | Ssaakkaa | 2,716 Kb |
Form Labels | Bartuc | 2,717 Kb |
A Pen by Andrea Verlicchi | Verlok | 2,018 Kb |
Fluid Layout with Float | Jxqr97 | 1,785 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Main page display | BarryKe | 4,562 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
Modal Dialog | Gigaleet | 2,251 Kb |
Subtle site navigation with description | Necks | 3,206 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!