下拉菜单的问题

Question

当我点击 575px 处可见的菜单图标（只有当屏幕尺寸小于 576px 时才有可能），它改变了它的位置和标题 (FOOD, LLC)还。我该如何解决？

网页： https://muhammad1918.github.io/New-Menu/MenuSite/

Answer 1

试试这个绝对是唯一的选择:)

@media screen and (max-width: 576px) {
    h1 {font-size:10vw;}
    #second{
      position: absolute  !important;
      top: 40px;
      left: 40px;
    }
    .navbar{
      position: absolute !important;
      right: 0;
      top: 30px;
      margin-bottom:50px;
    }
    #trois {
      margin-right:20px;
    }
    #first {
      position:relative !important;
    }
}

然后 position:relative !important; 到 #first 元素。

同时将 ml-auto class 添加到菜单按钮

<button id="trois" class="navbar-toggler collapsed ml-auto">

View Demo less than @576px window size to see the menu

Answer 2

这部分：

只需删除 margin-top，它将保持不变 line-height

@media screen and (max-width: 576px)
h1 {
    font-size: 10vw;
    margin-top: -10px;
}

如果你想让它在两侧有相同的填充（不跳到左边）你必须手动添加填充，因为默认行为是删除它。你需要添加 padding-left: 15px; 到 @media (max-width: 575.98px) 的 .navbar-expand-sm>.container。因为默认值无论如何都是 15px 当它大于那个值时。

下拉菜单的问题

Problems With Dropdown Menu

html

css

twitter-bootstrap

drop-down-menu

bootstrap-4