Foundation 6 Sticky Topbar 在小浏览器调整大小时表现不正常
Foundation 6 Sticky Topbar not behaving properly at small browser resize
我的网站上有一个粘性顶部栏。它在 Large 和 Medium 上工作正常,但当它变小时,它会发展出 54px 的高度。我将 class sticky-container 设置为 height: 0;如果我刷新浏览器,它就会工作。当我离开并再次返回时,54px 的差距再次出现。有任何想法吗?谢谢-Adolfo
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="/assets/img/fingerLogoXS.gif" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div data-sticky-container>
<div class="small-12 sticky" data-sticky data-options="marginTop: 0">
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="/assets/img/fingerLogoSM.2.gif">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</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="#">Technologies Used...</a>
<ul class="submenu menu vertical medium-verticle" data-submenu>
<li><a href="foundation.html">Foundation</a></li>
<li><a href="html5.html">HTML5</a></li>
<li><a href="css3.html">CSS3</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="wordpress.html">WordPress</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
css:
/* Small Navigation */
.logo-small {
float: right;
padding: 4px; }
.title-bar {
padding: 0 .5rem;
background-color: #3D3242; }
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
padding: 4px; }
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
.logo-wrapper {
position: relative; }
.logo-wrapper .logo {
width: 92px;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: -46px; }
.top-bar-right {
width: 50%;
padding-left: 60px; }
.top-bar-right ul {
float: left; }
.top-bar-left {
width: 50%;
padding-right: 60px; }
.top-bar-left ul {
float: right; } }
正如我在评论中所说,您可以隐藏 div。
可以使用基础可见度classes
只需添加 class
hide-for-small-only
置顶div。
可以在这里找到更多信息:http://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html
或者您可以使用媒体查询
@media screen
and (max-width : 640px) {
.sticky-container{display:none;}
}
当屏幕宽度小于 640px 时,这将隐藏 div;
我的网站上有一个粘性顶部栏。它在 Large 和 Medium 上工作正常,但当它变小时,它会发展出 54px 的高度。我将 class sticky-container 设置为 height: 0;如果我刷新浏览器,它就会工作。当我离开并再次返回时,54px 的差距再次出现。有任何想法吗?谢谢-Adolfo
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="/assets/img/fingerLogoXS.gif" /></a>
<button class="menu-icon" type="button" data-toggle></button>
<div class="title-bar-title">Menu</div>
</div>
<!-- Medium-Up Navigation -->
<div data-sticky-container>
<div class="small-12 sticky" data-sticky data-options="marginTop: 0">
<nav class="top-bar" id="nav-menu">
<div class="logo-wrapper hide-for-small-only">
<div class="logo">
<img src="/assets/img/fingerLogoSM.2.gif">
</div>
</div>
<!-- Left Nav Section -->
<div class="top-bar-left">
<ul class="vertical medium-horizontal menu">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</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="#">Technologies Used...</a>
<ul class="submenu menu vertical medium-verticle" data-submenu>
<li><a href="foundation.html">Foundation</a></li>
<li><a href="html5.html">HTML5</a></li>
<li><a href="css3.html">CSS3</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="wordpress.html">WordPress</a></li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
</div>
css:
/* Small Navigation */
.logo-small {
float: right;
padding: 4px; }
.title-bar {
padding: 0 .5rem;
background-color: #3D3242; }
.menu-icon,
.title-bar-title {
position: relative;
top: 10px;
padding: 4px; }
/* Medium-Up Navigation */
@media only screen and (min-width: 40rem) {
.logo-wrapper {
position: relative; }
.logo-wrapper .logo {
width: 92px;
height: 92px;
position: absolute;
left: 50%;
right: 50%;
top: -6px;
margin-left: -46px; }
.top-bar-right {
width: 50%;
padding-left: 60px; }
.top-bar-right ul {
float: left; }
.top-bar-left {
width: 50%;
padding-right: 60px; }
.top-bar-left ul {
float: right; } }
正如我在评论中所说,您可以隐藏 div。
可以使用基础可见度classes
只需添加 class
hide-for-small-only
置顶div。 可以在这里找到更多信息:http://foundation.zurb.com/sites/docs/v/5.5.3/components/visibility.html
或者您可以使用媒体查询
@media screen
and (max-width : 640px) {
.sticky-container{display:none;}
}
当屏幕宽度小于 640px 时,这将隐藏 div;