当 parent 变大时，如何让我的导航栏汉堡包保持在同一站？

Question

title 说的有点像。当我的导航栏打开时，X 会转到 parent 绿色 div 的中间。我希望它和普通酒吧呆在同一个地方。这是一个现场演示： link hidden CSS 在 styles/city.css 中并向下滚动以查看 hamburger、bar 和 mapNav：https://i.stack.imgur.com/QQFfA.png

Navbar closed

Where X is, but where it should be in red

提前致谢，

- JT

Answer 1

这可能不是最好的方法，但它会奏效。将此添加到您的 css.

.hamburger.active .bar {
    position: relative;
    left: 124px;
}

Answer 2

此代码片段与您的 HTML 会更优雅一些，但请将以下 CSS 添加到您的代码中：

margin-left: auto; 将尽可能高的边距设置到左侧，因此汉堡菜单一直在右侧。整个容器是50px，汉堡菜单的宽度是25px，也就是说margin-left的值是25px。将边距的一半应用到 margin-right: 12.5px，这样汉堡包菜单在关闭时居中并保持不变。

.hamburger {
    display: block;
    cursor: pointer;
    padding-top: 10px;
    width: 25px;
    /* Remove this */
    /* margin: auto; */
    margin-left: auto;
    margin-right: 12.5px;
}

还有下次，请确保包含您的代码！那样帮你就容易多了。

当 parent 变大时，如何让我的导航栏汉堡包保持在同一站？

How do I keep my navbar hamburger on the same stop when the parent gets bigger?

html

css

navbar