将徽标位置固定在响应式导航栏上

Question

I am having problems styling a responsive navbar. The expected behaviour is that all nav links are displayed on larger screens but are collapsed into a hidden mobile menu on smaller screen sizes.

In the following snippet on smaller screens, when the logo is clicked, the logo moves down to the middle of the dropdown.

How do I keep it(the logo) fixed to the top of the navbar and properly align the menu items?

 document.querySelector('.topbar-brand').addEventListener('click', () => document.querySelector('.topbar-nav').classList.toggle('responsive')); document.addEventListener('scroll', () => document.querySelector('.topbar-nav').classList.remove('responsive')); 

 .topbar { background-color: rgb(40, 58, 156); display: flex; flex-flow: row nowrap; top: 0; justify-content: space-between; align-items: center; width: 100%; padding-left: 1rem; padding-right: 1rem; z-index: 1; } .topbar-brand { display: block; margin-right: 1rem; font-size: 1.25rem; font-family: cursive, Arial, Helvetica, sans-serif; } .topbar-brand img { object-fit: contain; height: 5rem; width: 5rem; } .topbar-brand:hover, .topbar-brand:focus { text-decoration: none; } .topbar-nav { display: flex; flex-direction: row; justify-self: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .sticky { position: fixed; } .nav-link { font-family: Roboto, Arial, Helvetica, sans-serif; font-style: italic; font-weight: 900; display: block; padding: 1.5rem; text-decoration: none; color: whitesmoke; } .nav-link:focus { background-color: rgba(41, 71, 240, 0.993); border-radius: 1rem; } @media screen and (max-width: 600px) { .topbar-nav li { display: none; } .topbar { align-content: space-around; justify-content: start; } } @media screen and (max-width: 600px) { .topbar-brand { margin-right: 5 rem; margin-top: 0; } .topbar-nav.responsive { display: flex; flex-direction: column; text-align: left; margin-top: 2rem; } .topbar-nav.responsive li { display: initial; } .topbar-nav.responsive li { border-bottom: 0.1rem solid black; } } 

 <nav class="topbar sticky"> <a class="topbar-brand" href="javascript:void(0);"><img src="" alt="logo"></a> <ul class="topbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#explore">Top Picks</a> </li> <li class="nav-item"> <a class="nav-link" href="users/login.html">Login</a> </li> </ul> </nav> 

Answer 1

Simply add margin-bottom: auto; to .topbar-brand . Since it's a flex element this will force its alignment to the top.

Here is a good article with some more info regarding flexbox and auto margins: CSS-tricks: The peculiar magic of flexbox and auto margins

 document.querySelector('.topbar-brand').addEventListener('click', () => document.querySelector('.topbar-nav').classList.toggle('responsive')); document.addEventListener('scroll', () => document.querySelector('.topbar-nav').classList.remove('responsive')); 

 .topbar { background-color: rgb(40, 58, 156); display: flex; flex-flow: row nowrap; top: 0; justify-content: space-between; align-items: center; width: 100%; padding-left: 1rem; padding-right: 1rem; z-index: 1; } .topbar-brand { display: block; margin-right: 1rem; font-size: 1.25rem; font-family: cursive, Arial, Helvetica, sans-serif; } .topbar-brand img { object-fit: contain; height: 5rem; width: 5rem; } .topbar-brand:hover, .topbar-brand:focus { text-decoration: none; } .topbar-nav { display: flex; flex-direction: row; justify-self: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; } .sticky { position: fixed; } .nav-link { font-family: Roboto, Arial, Helvetica, sans-serif; font-style: italic; font-weight: 900; display: block; padding: 1.5rem; text-decoration: none; color: whitesmoke; } .nav-link:focus { background-color: rgba(41, 71, 240, 0.993); border-radius: 1rem; } @media screen and (max-width: 600px) { .topbar-nav li { display: none; } .topbar { align-content: space-around; justify-content: start; } } @media screen and (max-width: 600px) { .topbar-brand { margin-right: 5 rem; margin-top: 0; margin-bottom: auto; } .topbar-nav.responsive { display: flex; flex-direction: column; text-align: left; margin-top: 2rem; } .topbar-nav.responsive li { display: initial; } .topbar-nav.responsive li { border-bottom: 0.1rem solid black; } } 

 <nav class="topbar sticky"> <a class="topbar-brand" href="javascript:void(0);"><img src="" alt="logo"></a> <ul class="topbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#explore">Top Picks</a> </li> <li class="nav-item"> <a class="nav-link" href="users/login.html">Login</a> </li> </ul> </nav>