.top-bar{
	border-bottom: 1px solid $light;

	.title-area{
		background-color: $body-font-color;
		text-align: center;

		.name {
			h1{
				a{
					font-size: 22px;
				}
			}
		}
	}

	.top-bar-section{

		ul li{
			background: transparent;

			a:not(.button){
				color: $body-font-color;
				background: transparent;
				&:after{
					border-color: $body-font-color transparent transparent transparent;
				}
			}
		}
	}
}
.top-bar{
	border-bottom: 1px solid $light;

	.title-area{
		background-color: $body-font-color;
		text-align: center;

		.name {
			h1{
				a{
					font-size: 22px;
					width: 100%;
				}
			}
		}
	}

	.top-bar-section{

		ul li{
			background: transparent;

			a:not(.button){
				color: $body-font-color;
				background: transparent;
				&:after{
					border-color: $body-font-color transparent transparent transparent;
				}
			}
		}
	}
}

Fix header being off center on mobile
Fix header being off center on mobile

Foundation sets the width to 75%, but doesn't center the block so it appears off center on mobile. By forcing the block to 100% it effectively centers the text inside the navbar, which is 100% the width of the viewport.
