* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
font-size: 14px;
}
header {
width: 100vw;
height: 50px;
background-color: #222;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Container for the Left and Right nav sections*/
header>div {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1140px;
width: 100%;
padding: 0 20px;
}
/* adjust width to set size */
nav {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
display: flex;
padding: 0 20px;
}
nav a {
padding: .8rem 1rem;
}
header>div>a {
font-size: 18px;
border-bottom:
}
.a-tag-header {
text-decoration: none;
color: #999;
display: block;
}
nav a:hover {
color: #fff;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: none;
}
@media screen and (max-width: 890px) {
/* Header */
header {
height: auto;
}
header>div {
flex-direction: column;
padding: 0;
}
nav {
display: flex;
width: 100%;
flex-direction: column;
}
nav ul {
flex-direction: column;
text-align: center;
align-items: center;
padding: 0;
}
nav ul li {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
nav ul li:hover {
background-color: aqua;
}
header>div>a {
padding: .8rem 0;
}
header>div>a:hover {
background-image: #eee;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: inline-block;
color: #F0F0F0;
font-size: 22px;
cursor: pointer;
position: absolute;
}
}<header>
<div>
<a class="a-tag-header">Chemical Finger Print Analysis</a>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
<nav>
<ul>
<li><a href="#" class="a-tag-header">Home</a></li>
<li><a href="#" class="a-tag-header">About</a></li>
<li><a href="#" class="a-tag-header">Contact</a></li>
<li><a href="#" class="a-tag-header">Data</a></li>
<li><a href="#" class="a-tag-header">Reports</a></li>
</ul>
<ul>
<li><a href="#" class="a-tag-header">Register</a></li>
<li><a href="#" class="a-tag-header">Login</a></li>
</ul>
</nav>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
</div>
</header>Hey there, I'm in the process of building a flexible navigation bar using Flexbox approach with a desktop-first design. The navigation bar consists of a title and a menu toggle along with two separate anchor tags. While I've managed to make the navigation responsive, I'm facing a challenge making the title and menu toggle share the top container responsively when the screen size is smaller than 850px. I've experimented with several solutions but haven't been successful. Any suggestions would be greatly appreciated. Thanks!