Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <header>
    <div><h1>Super Bad Super BadSuper BadSuper BadSuper BadSuper Bad</h1></div>
    <nav>
        <a>First Link</a>
        <a>Second Link</a>
        <a>Third Link</a>
    </nav>
  </header>
</body>
</html>
 
@import url(http://fonts.googleapis.com/css?family=Lato:400,700italic);
* { padding: 0; margin: 0; }
body { background: #1abc9c; font-family: 'Lato', sans-serif; text-transform: uppercase; letter-spacing: 1px;}
​
header {
  display: table;
  padding: 2em 5%;
  background: #2c3e50;
  color: #fff;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
​
header nav,
header div {
  display: table-cell;
  vertical-align: middle;
  height: 8em;
}
​
header nav {
  text-align: right;
  white-space: nowrap;
}
​
@media screen and (max-width: 720px){
    header {
        height: auto;
    }
    
    header > div,
    header > div h1,
    header nav {
        height: auto;
        width: auto;
        display: block;
        text-align: center;
    }
}
​
header > div h1 {
    font-size: 3em;
    font-style: italic;
}
​
header nav a {
    padding: 0 0.6em;
    white-space: nowrap;
}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers