断点未按预期工作

Question

我试图理解如何阻止断点将“联系”菜单项击倒到下一行。这是link to the page。

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

使用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;
    }
}

这意味着在任何大于900px的窗口大小的情况下，汉堡包将被隐藏，并且常规桌面菜单将是可见的 - 当没有足够的空间时，将它呈现在两条线上，正如您所注意到的那样。

使用@desktop变量更改较少的文件以显示它将显示宽达1300px的屏幕的汉堡包。它应该做的伎俩。