I have encountered a unique issue that I cannot seem to find a solution for, so here goes:
I am in the process of designing a navigation bar with the heading positioned on the left-hand side and the navigation items on the right. My goal is to center the nav bar on the page with a width of 960px. In addition to this, I would like to achieve two specific things:
1.) The navigation bar should be fixed at the top of the screen to remain visible while scrolling.
2.) When minimizing the screen, the spacing between the heading and the navigation items should decrease first. Currently, the items do not adjust responsively.
I can only accomplish one of these goals at a time, not both simultaneously. Any assistance or suggestions would be greatly appreciated. Thank you.
html {
font-family: helvetica;
font-size: 18px;
}
.container {
max-width: 960px;
margin: 0 auto;
}
.banner {
background-color: aqua;
opacity: .5;
border-radius: 10px;
position: fixed;
}
.header {
display: flex;
justify-content: space-between;
height: 4rem;
align-items: center;
width: 960px;
}
.container .banner .header h1 {
margin-left: 2.5rem;
}
.container .banner .header .nav ul {
display: flex;
width: 200px;
justify-content: space-between;
text-decoration: none;
margin-right: 2.5rem;
}
.container .banner .header .nav ul a {
color: black;
list-style-type: none;
text-decoration: none;
}<div class="container">
<div class="banner">
<div class="header">
<h1>My Sweet Sweet Georgia</h1>
<div class="nav">
<ul>
<li><a href="#">doggy</a></li>
<li><a href="#">puppy</a></li>
<li><a href="#">toys</a></li>
</ul>
</div>
</div>
</div>
</div>