我正在使用基础5(最新的,截至撰写时间:v5.5.3)
我设置了顶栏菜单,每个元素都有一些图标。 基本上:除非页面宽度,否则顶栏菜单工作正常 超过[640px]且小于[828px]!
我创建了一个截图来更好地说明问题: screenshot of broken top-bar menu
我准备了一个小提琴来说明我的问题。 (https://jsfiddle.net/sLk0jf4L/146/)
顶栏HTML:
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1><a href="#">My super homepage</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span> Choose language</a>
<ul class="dropdown">
<li><a href="#">Language 1</a></li>
<li class="active"><a href="#">Language 2</a></li>
<li><a href="#">Language 3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
定位图标的其他CSS
span.menu-item
{
font-size:1.25rem;
font-weight:500;
line-height:1.25rem;
}
a.link-item-new span.menu-item,
a.link-item-exclusive span.menu-item
{
position:relative;
top:0.1rem;
}
a.link-item-about span.menu-item
{
position:relative;
top:0.15rem;
}
a.link-item-flag span.menu-item
{
position:relative;
top:0.2rem;
}
我需要应用哪些CSS规则才能消除这种破损? 如果菜单只是作为汉堡包出现,那就好了 图标而不是制动。
感谢您的时间和知识。
答案 0 :(得分:0)
我对您的HTML进行了一些修改,因为我在&#34;选择语言&#34;周围添加了span
。类.lang-text
的文本,因此我可以使用@media
查询操作内容。
这个想法是当视口大小达到断点时,只有&#34;选择语言&#34;文本被隐藏,保留标志图标(以及下拉选项)。
<强> HTML 强>
<div class="contain-to-grid">
<nav class="top-bar" data-topbar role="navigation" data-options="'Back'">
<ul class="title-area">
<li class="name">
<h1><a href="#">My super homepage</a></h1>
</li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<!-- Left Nav Section -->
<ul class="left">
<li class="active">
<a class="link-item-exclusive" href="#"><span class="lnr lnr-star menu-item"></span> Exclusive goods</a>
</li>
<li class="">
<a class="link-item-new" href="#"><span class="lnr lnr-download menu-item"></span> New arrivals</a>
</li>
<li class="">
<a class="link-item-about" href="#"><span class="lnr lnr-warning menu-item"></span> About</a>
</li>
</ul>
<!-- Right Nav Section -->
<ul class="right">
<li class="has-dropdown">
<a class="link-item-flag" href="#"><span class="lnr lnr-flag menu-item"></span><span class="lang-text"> Choose language</span></a>
<ul class="dropdown">
<li><a href="#">Language 1</a></li>
<li class="active"><a href="#">Language 2</a></li>
<li><a href="#">Language 3</a></li>
</ul>
</li>
</ul>
</section>
</nav>
</div>
@media查询:
@media only screen and (min-width: 40em) {
a.link-item-flag span.lang-text {
display: none;
}
}
@media only screen and (min-width: 46.5em) {
a.link-item-flag span.lang-text {
display: inline-block;
}
}
<强> Updated Fiddle 强>