A Pen by Sam Norton on CodePen.
Created
December 30, 2021 14:59
-
-
Save neisdev/f2816a6815c6c8a83179ba2693ff33d8 to your computer and use it in GitHub Desktop.
Flexbox Navigation Bar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header class="header"> | |
<h1 class="logo"><a href="#">Flexbox</a></h1> | |
<ul class="main-nav"> | |
<li><a href="#">Home</a></li> | |
<li><a href="#">About</a></li> | |
<li><a href="#">Portfolio</a></li> | |
<li><a href="#">Contact</a></li> | |
</ul> | |
</header> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
box-sizing: border-box; | |
} | |
body { | |
font-family: 'Montserrat', sans-serif; | |
line-height: 1.6; | |
margin: 0; | |
min-height: 100vh; | |
} | |
ul { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
h2, | |
h3, | |
a { | |
color: #34495e; | |
} | |
a { | |
text-decoration: none; | |
} | |
.logo { | |
margin: 0; | |
font-size: 1.45em; | |
} | |
.main-nav { | |
margin-top: 5px; | |
} | |
.logo a, | |
.main-nav a { | |
padding: 10px 15px; | |
text-transform: uppercase; | |
text-align: center; | |
display: block; | |
} | |
.main-nav a { | |
color: #34495e; | |
font-size: .99em; | |
} | |
.main-nav a:hover { | |
color: #718daa; | |
} | |
.header { | |
padding-top: .5em; | |
padding-bottom: .5em; | |
border: 1px solid #a2a2a2; | |
background-color: #f4f4f4; | |
-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); | |
-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); | |
box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.75); | |
-webkit-border-radius: 5px; | |
-moz-border-radius: 5px; | |
border-radius: 5px; | |
} | |
/* ================================= | |
Media Queries | |
==================================== */ | |
@media (min-width: 769px) { | |
.header, | |
.main-nav { | |
display: flex; | |
} | |
.header { | |
flex-direction: column; | |
align-items: center; | |
.header{ | |
width: 80%; | |
margin: 0 auto; | |
max-width: 1150px; | |
} | |
} | |
} | |
@media (min-width: 1025px) { | |
.header { | |
flex-direction: row; | |
justify-content: space-between; | |
} | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment