我正在使用Foundation 6为朋友的电影制作公司建立一个网站。我创建了一个顶部导航栏，其徽标图像位于顶部导航栏上方，并使它们均具有粘性。在大屏幕和小屏幕上似乎都可以正常工作，但如果在徽标之间的任何内容与顶部栏分开，则可以正常显示。当您拉伸和压缩页面时，这一点最为明显。
我尝试将图像包括在顶部栏div中，但它将其向左对齐，而我目前无法将其与顶部对齐。这是我第一次使用Foundation中的粘滞功能。我浏览了Foundation文档，Google和StackOverflow，但没有找到类似的东西。
这是我的顶栏部分。
<div data-sticky-container>
<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="example-menu"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="grid-y">
<img src="images/safe_image.jpeg" style="width: 100%; height: auto"; data-sticky data-options="marginTop:0;">
<div class="top-bar" data-sticky data-options="marginTop:10.2;" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu">
<!-- <div class="top-bar" style="width:100%; background-color: white; padding-top: 10px;" id="example-menu"> -->
<div class="top-bar-right" data-dropdown-menu style="display: table; margin: 0 auto;">
<ul class="dropdown vertical medium-horizontal menu" style="background-color: white;">
<li><a href="index.html">Home</a></li>
<li><a href="news.html">Current News</a></li>
<li><a href="film.html">Film/Media</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="publicity.html">Publicity</a></li>
<li><a href="miscellaneous.html">Misc</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
我希望徽标图像和导航栏在更大的屏幕尺寸下看起来像它们，但是将它们最小化到触发数据切换的位置，而不是像现在这样分开。