如何更改 wordpress 网站上菜单的移动断点？答案

【问题标题】：How to change mobile breakpoint for a menu on a wordpress website?如何更改 wordpress 网站上菜单的移动断点？
【发布时间】：2020-01-31 15:41:00
【问题描述】：

在我的网站上，我有一个菜单。它在大型笔记本电脑、平板电脑和移动设备上看起来不错，但对于小型笔记本电脑，徽标出现在菜单上。我想早点把菜单的移动断点改成汉堡菜单。我正在使用 wordpress 和斯德哥尔摩主题。

【问题讨论】：

查看您的主题 CSS 文件，首先找出您的菜单更改的确切时间...这样您就会知道现在发生的断点...然后找到例如 960px 之类的断点。 .. 并在 CSS 中更改它 :) 我希望我至少能帮助一点
很遗憾，我找不到这个信息……我还在代码里找……

标签： css wordpress responsive-design

【解决方案1】：

如果有可以编写自定义 css 的区域，一个可能的解决方案是使用 媒体查询。

    @media only screen and (max-width: 600px) {
       //your css styles here
    }

只要屏幕宽度小于 600 像素，此媒体查询就会应用其中的样式。

有许多资源可用于学习如何创建汉堡菜单。这应该可以回答您的主要问题。

【讨论】：

嗨 Dylan，我明白，但主题已经创建了一个汉堡菜单，但仅适用于平板电脑和移动设备，我希望它也成为小型台式机的汉堡。我在 CSS 代码中找不到它的位置
没有例子很难弄清楚发生了什么。您可以尝试使用 chrome 开发人员工具，并确定在用户调整屏幕大小时是否将某个类应用于元素。然后，您可以使用自定义媒体查询将该类应用于您所需的屏幕尺寸。

【解决方案2】：

@media only screen and (max-width: 1199.98px) {
  .main_menu { display: none!important; }
  .mobile_menu{ display: block !important; }
  .mobile_menu_button { display: table !important; }
}
.logo_wrapper {
    left: 45%;
    position: absolute;
    height: 50px!important;
  }
  .q_logo {
    display: table-cell;
    position: relative;
    top: auto;
    vertical-align: middle;
  }
  .q_logo a {
    left: -50%;
    width: auto !important;
  }
  .q_logo img {
    top: 0 !important;
    left: 0;
  }
  .header_inner_left{
    position: relative!important;
    left: 0!important;
    margin-bottom: 0;
  }
}

1199.98px 是 Bootstrap 用于小型桌面的断点，但请将其更改为最适合您的断点。

【讨论】：