Center aligned menu with borders
// "About Us" menu.
.menu-about-us {
@include clearfix;
text-align: center;
// Block title.
h2.block__title {
@include font-size(18);
margin-bottom: rem(10px);
}
// Content.
.block-content {
@include clearfix;
float: left;
overflow: hidden;
position: relative;
width: 100%;
}
// Menu.
ul.menu {
@include font-size(16, 16);
clear: left;
float: left;
left: 50%;
margin: 0;
padding: 0;
position: relative;
text-align: center;
li {
border-right: 1px solid $white;
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
// First.
&.first {
// Links.
a,
a:visited {
padding-left: 0;
}
}
// Last.
&.last {
border-right: none;
// Links.
a,
a:visited {
padding-right: 0;
}
}
}
// Links.
a,
a:visited {
display: block;
padding: 0 rem(10px);
// Hover, focus, and active.
&:hover,
&:focus,
&.active {
text-decoration: underline;
}
}
}
}