Skip to content

Instantly share code, notes, and snippets.

@brendo
Forked from anonymous/MYppqm.markdown
Created January 14, 2015 12:39
Show Gist options
  • Save brendo/445bef1d169662253a00 to your computer and use it in GitHub Desktop.
Save brendo/445bef1d169662253a00 to your computer and use it in GitHub Desktop.
<nav>
<h1>Logo</h1>
<a>Lorem</a><a class='active'>Lorem Ipsum</a>
<a>Ipsum Da Tada!</a>
<div class='filler'></div>
</nav>
body {
margin:0;
padding:0;
background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
background-size: cover;
}
nav {
position: relative;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
nav > h1 {
margin: 0;
}
nav > * {
background: rgba(255,255,255,0.7);
padding: 10px 15px 30px;
min-width: 100px;
text-align: center;
position:relative;
overflow: hidden;
z-index:1;
}
a.active {
background: none;
}
a.active:after {
content:'';
position:absolute;
left: calc(50% - 10px);
width: 20px;
padding-bottom: 20px;
bottom: -10px;
background: none;
border-radius: 50%;
box-shadow: 0px 0px 0px 150px rgba(255,255,255,0.7);
z-index: -1;
}
div.filler {
flex: 1;
align-self: flex-stretch;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment