下拉菜单问题

Question

当我单击在576px可见的菜单图标（只有屏幕尺寸小于575px时才可能）时，它会更改位置，标题（FOOD，LLC）也将更改。我该如何解决？

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

Answer 1

尝试绝对是一种选择：）

set_yticklabels(['0.0', '1.0'])

然后将@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

查看演示窗口小于@ 576px的窗口以查看菜单

Answer 2

此部分：

只需删除margin-top，它将保持相同的行高

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

如果希望它的侧面具有相同的填充（不跳到左侧），则必须手动添加该填充，因为默认行为是将其删除。您需要添加 从padding-left: 15px;到.navbar-expand-sm>.container的{​​{1}}。由于默认值大于15像素，因此默认值为15像素。