Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
#subnav
.container
%ul#nav-subnav
%li.nav-subnav-item
%a.nav-subnav-link{href: '#'} Nav Item 1
%li.nav-subnav-item
%a.nav-subnav-link{href: '#'} Nav Item 2
%li.nav-subnav-item
%a.nav-subnav-link{href: '#'} Nav Item 3
%li.nav-subnav-item
%a.nav-subnav-link{href: '#'} Nav Item 4
%li.nav-subnav-item
%a.nav-subnav-link{href: '#'} Nav Item 5
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
#subnav {
background-color: #ccc;
}
.container {
@include outer-container;
background-color: #eee;
}
#nav-subnav {
@include row(table);
margin: 0;
padding: 0;
.nav-subnav-item {
display: table-cell;
text-align: center;
list-style-type: none;
}
.nav-subnav-link {
text-align: center;
display: block;
}
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#subnav {
background-color: #ccc;
}
.container {
max-width: 68em;
margin-left: auto;
margin-right: auto;
background-color: #eee;
}
.container:after {
content: "";
display: table;
clear: both;
}
#nav-subnav {
display: table;
width: 100%;
table-layout: fixed;
margin: 0;
padding: 0;
}
#nav-subnav:after {
content: "";
display: table;
clear: both;
}
#nav-subnav .nav-subnav-item {
display: table-cell;
text-align: center;
list-style-type: none;
}
#nav-subnav .nav-subnav-link {
text-align: center;
display: block;
}
<div id='subnav'>
<div class='container'>
<ul id='nav-subnav'>
<li class='nav-subnav-item'>
<a class='nav-subnav-link' href='#'>Nav Item 1</a>
</li>
<li class='nav-subnav-item'>
<a class='nav-subnav-link' href='#'>Nav Item 2</a>
</li>
<li class='nav-subnav-item'>
<a class='nav-subnav-link' href='#'>Nav Item 3</a>
</li>
<li class='nav-subnav-item'>
<a class='nav-subnav-link' href='#'>Nav Item 4</a>
</li>
<li class='nav-subnav-item'>
<a class='nav-subnav-link' href='#'>Nav Item 5</a>
</li>
</ul>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment