我的網站的主菜單響應斷點是在850像素的移動菜單。雖然我想把它從1369像素改成移動菜單，因為1369像素的桌面主菜單溢出了網站內容。我嘗試過CSS，例如:

@media only screen and (max-width: 1369px) {
    .header-nav.header-nav-main.nav.nav-left.nav-line-grow.nav-size-small.nav-spacing-medium.nav-uppercase {
        display: none;
    }
    .mobile-nav.nav.nav-left {
        display: block; !important:
    }
}

因此，它只隱藏桌面菜單，但沒有漢堡菜單出現...

有人能告訴我如何正確地改變這個斷點嗎？p.s .我是一個網頁開發的業余初學者。

提前感謝。

通過添加@media，可以很容易地在css文件中添加另一個斷點:

@media only screen and (max-width: 1369px) {
    .header-nav, .header-nav-main, .nav, .nav-left, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
        display: none;
    }
    .mobile-nav, .nav.nav-left {
        display: block; !important:
    }
}

您在正確的軌道上，但是它的父容器也被設置為display: none，所以您要改為以它為目標。

大概是這樣的:

@media only screen and (max-width: 1369px) {
    .header-inner .flex-col.show-for-medium.flex-left {
        display: flex;
        /* block will work too, but flex is most likely its default state, up to you really */
    }
}

我使用這段代碼，只需將max-width: 1369px改為斷點即可

@media only screen and (max-width: 1369px) {
    .header-inner .flex-col.show-for-medium.flex-left {
        display: flex !important;
    }
    .hide-for-medium {
    display: none !important;
}
}