如何让我的导航栏切换按钮响应？

Question

我试图让我的导航栏切换按钮响应，当缩小屏幕大小时，登录和注册都是响应式的并向内移动到其他导航栏元素直到某个断点，然后它们消失，但是当我让它们消失并且让我的导航栏切换出现，我的导航栏切换不保持响应或与登录和登录元素与徽标保持相同的距离（将您自己的徽标作为占位符）我希望我的导航栏以相同的方式切换到 function作为缩小屏幕时的登录和注册元素。 我尝试将切换按钮放在与登录和注册元素相同的 div 中，但是当我使 div 消失时，切换按钮不会出现在它们的位置，我还尝试为切换按钮制作一个单独的 div（如中所示代码片段）并试图给它显示：flex 并且也什么也没做。

<>

代码笔： https://codepen.io/decexodus/pen/ExRJYeK

 html, body { margin: 0%; background-color: white; padding: 0%; }.navbar { display: flex; position: fixed; align-items: center; height: 5rem; width: 100%; background-color: white; }.left-elements { display: flex; gap: 1.5rem; padding-inline-start: 1.5em; align-items: center; font-family: 'Poppins', sans-serif; font-size: 0.9em; height: 50%; width: 50%; }.right-elements { display: flex; gap: 1em; white-space: nowrap; padding-inline-end: 4em; justify-content: flex-end; align-items: center; font-family: 'Poppins', sans-serif; font-size: 0.9em; height: 50%; width: 50%; }.logo { padding-inline-start: 0.5em; height: 3rem; width: 15rem; } a { text-decoration: none; color: black; }.navbar-toggle { display: none; } @media screen and (max-width: 820px) { body { background-color: rebeccapurple; }.left-elements { display: none; }.right-elements { display: none; }.navbar-toggle { display: flex; } }

 <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"> <nav class="navbar"> <div class="logo"> <a href=""><img class="logo" src="./images/Donation_Hub-3-2-removebg-preview.png" alt=""></a> </div> <div class="left-elements"> <a href="">About</a> <a href="">Pricing</a> <a href="">Integrations</a> <a href="">Support</a> </div> <div class="right-elements"> <a href="">Log In</a> <a href=""><button class="sign-up">Sign Up</button></a> </div> <div class="navbar-toggle"> <a href=""> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1.5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1.5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1.5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> </svg> </a> </div> </nav>

Answer 1

您需要调整导航栏中的项目并为切换留出余量。

 html, body { margin: 0%; background-color: white; padding: 0%; }.navbar { display: flex; position: fixed; align-items: center; height: 5rem; width: 100%; background-color: white; /* Added this */ justify-content: space-between; }.left-elements { display: flex; gap: 1.5rem; padding-inline-start: 1.5em; align-items: center; font-family: 'Poppins', sans-serif; font-size: 0.9em; height: 50%; width: 50%; }.right-elements { display: flex; gap: 1em; white-space: nowrap; padding-inline-end: 4em; justify-content: flex-end; align-items: center; font-family: 'Poppins', sans-serif; font-size: 0.9em; height: 50%; width: 50%; }.logo { padding-inline-start: 0.5em; height: 3rem; width: 15rem; } a { text-decoration: none; color: black; }.navbar-toggle { display: none; } @media screen and (max-width: 820px) { body { background-color: rebeccapurple; }.left-elements { display: none; }.right-elements { display: none; }.navbar-toggle { display: flex; /* same value as padding in.right-elements */ margin-right: 4em; } }

 <nav class="navbar"> <div class="logo"> <a href=""><img class="logo" src="./images/Donation_Hub-3-2-removebg-preview.png" alt=""></a> </div> <div class="left-elements"> <a href="">About</a> <a href="">Pricing</a> <a href="">Integrations</a> <a href="">Support</a> </div> <div class="right-elements"> <a href="">Log In</a> <a href=""><button class="sign-up">Sign Up</button></a> </div> <div class="navbar-toggle"> <a href="#"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"> <path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1.5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1.5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1.5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/> </svg> </a> </div> </nav>