移动端导航栏Logo居中与汉堡菜单居右实现问题咨询

Hey there! I see the issue you're running into—let's get that logo centered and burger menu pinned to the right on mobile views. The problem with your current setup is that even though .nav-links is visually hidden (transformed off-screen), it's still part of the flex container, so justify-content: space-around is trying to split space between all three nav children. Here's how to fix it:

Step-by-Step Explanation #

1. Make the nav a positioning context: Add position: relative to the nav element so we can absolutely position the logo relative to it.
2. Adjust nav's flex alignment for mobile: Swap justify-content: space-around to space-between (and add padding) to push the burger to the right edge.
3. Center the logo absolutely: Use absolute positioning combined with transform to perfectly center the logo, regardless of other elements.

Modified Code #

Here's the updated CSS with changes marked:

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Added position: relative to nav */
nav { 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  min-height: 8vh; 
  background-color: #5d4954; 
  font-family: "Poppins", sans-serif;
  position: relative; /* New */
}
.logo { color: rgb(226, 226, 226); text-transform: uppercase; letter-spacing: 5px; font-size: 20px; }
.nav-links { display: flex; justify-content: space-around; width: 40%; }
.nav-links li { list-style: none; }
.nav-links a { color: rgb(226, 226, 226); text-decoration: none; letter-spacing: 3px; font-weight: bold; font-size: 14px; }
.burger { display: none; cursor: pointer; }
.burger div { width: 25px; height: 3px; background-color: rgb(226, 226, 226); margin: 5px; transition: all 0.3s ease; }
@media screen and (max-width: 1024px) { .nav-links { width: 60%; } }
@media screen and (max-width: 768px) { 
  body { overflow: hidden; } 
  .nav-links { 
    position: absolute; 
    right: 0px; 
    height: 92vh; 
    top: 8vh; 
    background-color: #5d4954; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    width: 50%; 
    transform: translateX(100%); 
    transition: transform 0.4s ease-in; 
  } 
  .nav-links li { opacity: 0; } 
  .burger { display: block; } 
  /* Updated nav alignment for mobile */
  nav {
    justify-content: space-between; /* Changed from space-around */
    padding: 0 2rem; /* Add padding to prevent burger from touching edge */
  }
  /* Absolute position logo to center */
  .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.nav-active { transform: translateX(0%); }

The HTML stays exactly the same—no changes needed there!

Why This Works #

• position: relative on nav ensures the logo's absolute positioning is contained within the nav bar.
• justify-content: space-between on mobile pushes the burger to the far right (since .nav-links is off-screen, only the burger is left to take the right spot).
• left: 50% + transform: translateX(-50%) is a foolproof way to center elements horizontally, even if their width changes (unlike setting a fixed margin).

This setup keeps your burger menu functionality intact while achieving the layout you want on mobile.

内容的提问来源于stack exchange，提问作者LeBron James