html - 断点没有按预期工作

Question

我正在尝试了解如何停止将“联系人”菜单项向下敲到下一行的断点。这是 link to the page .

我想让汉堡包出现，而不是将联系人菜单项敲到下一页，这在页面小于 1065 像素时发生。

使用 less 并设置变量:

更少的变量:

@mobile: 800px;
@tablet: 900px;
@desktop: 1300px;

@grid-columns: 12;
@grid-gutter-width: @space;

@grid-float-breakpoint: @mobile;
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

HTML 导航

<nav class="container lg nav">
<div class="hamburger-wrap js-toggle-menu">
    Menu
    <div class="hamburger"></div>
</div>
<a href="/" class="logo fl">{{ site_name }}</a>
<span class="panel">

{{ nav from="/" include_home="false" include_entries="true" exclude_from_navigation:isnt="true" }}
    {{ if has_entries }}
        <span class="dropdown js-dropdown">
            <span class="dropdown-trigger {{ if is_current or is_parent }}active{{ /if }}">{{ tag:nav_title or title }}</span>
            <span class="dropdown-content">
                <a href="{{ url }}">All</a>
                {{ *recursive children* }}
            </span>
        </span>
    {{ else }}
    <a {{ if is_current or is_parent }} class="active"{{ /if }} href="{{ page_link or url_link or get:url }}" {{ if target }}target="_blank"{{ /if }}">
        {{ tag:nav_title or title }}
    </a>
    {{ /if }}
{{ /nav }}

        </span>

Answer 1

你的汉堡包菜单被设置为使用你的媒体查询最小值的@tablet分辨率可见。我通过检查你的页面得到了这个:

@media (max-width: 900px) {
    .nav .hamburger-wrap {
        display: block;
        position: fixed;
        top: 22px;
        right: 30px;
        bottom: auto;
        left: auto;
        z-index: 2;
        padding-right: 25px;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 500;
    }
}

这意味着在任何大于 900 像素的窗口大小上，汉堡包将被隐藏，常规桌面菜单将可见 - 正如您所注意到的，当没有足够的空间时，将其呈现在两行上。

使用 @desktop 变量更改您的 less 文件以显示它，将在 1300 像素宽的屏幕上显示汉堡包。它应该可以解决问题。