我的网站有一个响应汉堡菜单，它使用纯HTML和CSS，因为我还没有进入JS。
我试图在菜单上添加一个标志，当它处于桌面模式时，它将浮动在菜单的左侧，当它跳到汉堡菜单下拉菜单时，它会居中。
我在下面附上我的代码。我没有找到一个适用于这种纯CSS/HTML解决方案的解决方案。
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
html {
font-family: Arial, Helvetica, sans-serif;
}
.nav {
border-bottom: 1px solid #EAEAEB;
text-align: right;
height: 70px;
line-height: 70px;
}
.menu {
margin: 0 30px 0 0;
}
.menu a {
text-decoration: none;
color: gray;
margin: 0 10px;
line-height: 70px;
}
span {
color: #54D17A;
}
label {
margin: 0 40px 0 0;
font-size: 26px;
line-height: 70px;
display: none;
}
#toggle {
display: none;
}
@media only screen and (max-width: 500px) {
label {
display: block;
cursor: pointer;
}
.menu {
text-align: center;
width: 100%;
display: none;
}
.menu a {
display: block;
border-bottom: 1px solid #EAEAEB;
margin: 0;
}
#toggle:checked+.menu {
display: block;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Responsive Menu</title>
</head>
<body>
<div class="nav">
<label for="toggle">☰</label>
<input type="checkbox" id="toggle">
<div class="menu">
<a href="#">Porfolio</a>
<a href="#">Services</a>
<a href="#">About</a>
<a href="#"><span>Get in Touch</span></a>
</div>
</div>
</body>
</html>很高兴你正在学习编程，祝你一切顺利。现在让我们来解决您的问题。
首先，要理解在css代码中，这一行；
@media only screen and (max-width: 500px) {
...
}
意味着只有当你的屏幕大小最大宽度为500px时，上面标签中的任何内容才会显示。有了这种理解，我们只需要在什么时候用我们想要展示的东西来玩逻辑游戏。
现在，根据您的问题，当徽标是常规菜单(桌面视图(时，您希望在某个点显示徽标，而当它是移动屏幕时，您则希望它在其他地方显示。
我已经修改了你的css代码，添加了一个名为.hide的类。在调用该类的任何位置，它都会在常规菜单中显示，但在移动菜单中，它会隐藏。你可以使用同样的逻辑来做你想做的事情。很抱歉，我的代码不是你想要的，但想法是存在的。
代码在下面的链接中。如果你需要澄清，请告诉我；
https://jsfiddle.net/9rv1xwq3/1/