我最近为 Foundation 6 迁移了带有徽标的居中顶栏构建块。它应该正是您所追求的。
HTML
<!-- Small Navigation -->
<div class="title-bar" data-responsive-toggle="nav-menu" data-hide-for="medium">
<a class="logo-small show-for-small-only" href="#"><img src="http://placehold.it/50x50?text=LOGO" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="http://placehold.it/350x150?text=LOGO">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
</ul>
</div>
<!-- Right Nav Section -->
<div class="top-bar-right">
<ul class="vertical medium-horizontal dropdown menu" data-dropdown-menu>
<li class="has-submenu">
<a href="#">Menu 4</a>
<ul class="submenu menu vertical medium-horizontal" data-submenu>
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
<li class="has-submenu">
<a href="#">Menu 5</a>
<ul class="submenu menu vertical" data-submenu>
<li><a href="#">First link in dropdown</a></li>
</ul>
</li>
</ul>
</div>
</nav>
SCSS
/* Variables */
// Adjust width accordingly (use even #'s)
$logo-width: 118px;
// Reduce px value to increase space between logo and menu text
$logo-padding: $logo-width - 32px;
// Leave alone
$logo-margin: - ($logo-width / 2);
/* Small Navigation */
.logo-small {
float: right;
}
.title-bar {
padding: 0 .5rem;
}
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
}
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
.logo-wrapper {
position: relative;
.logo {
width: $logo-width;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: $logo-margin;
}
}
// Right part
.top-bar-right {
width: 50%;
padding-left: $logo-padding;
ul {
float: left;
}
}
// Left part
.top-bar-left {
width: 50%;
padding-right: $logo-padding;
ul {
float: right;
}
}
}