Custom CSS Styles for Menu Bar
* {
margin: 0;
padding: 0;
}
body {
background: white;
font-family: 'Helvetica Neue', Helvetica;
font-weight: 400;
font-size: 1.05em;
line-height: 1.6rem;
color: white;
font-size: 1.2em;
}
header {
position: fixed;
background: #d777ea; /*light purple*/
width: 100%;
display: block;
}
header > nav > ul {
display: flex;
margin: 0;
padding: 0;
justify-content: flex-start;
list-style: none;
flex-wrap: wrap;
}
header > nav > ul > li {
margin: 0;
flex: 0 1 auto;
position: relative;
transition: 0.2s;
cursor: pointer;
}
header > nav > ul > li:hover {
background: #aa64e0; /*dark purple*/
}
header > nav > ul > li > ul {
/* dropdown */
position: absolute;
background: #76a1e8; /*light blue*/
display: none;
list-style-type: none;
margin: 0;
padding: 0;
}
header > nav > ul > li:hover > ul {
/* dropdown */
display: block;
width: 220px;
}
header > nav > ul > li > a {
color: white;
display: flex;
font-size: 1.5rem;
text-decoration: none;
padding: 1rem 1.5rem;
letter-spacing: 1px;
}
header > nav > ul > li > ul > li {
display: block;
}
header > nav > ul > li > ul > li > a {
text-decoration: none;
color: white;
display: flex;
letter-spacing: 1px;
cursor: pointer;
padding: .25rem 1.5rem;
}
header > nav > ul > li > ul > li:hover {
background: blue;
}
header > nav > ul > li > a > i {
margin-left: 5px;
}
input {
padding: .25rem;
width: 100px;
}
input:invalid {
border: 2px solid red;
}
header > nav > ul > li > ul > li > input:invalid + button {
background: red;
cursor: not-allowed;
}
button {
padding: .25rem;
}
An HTML Header and Image Section
<header>
<nav>
<ul>
<li><a href="#">Teams<i class="fas fa-caret-down"></i></a>
<ul>
<li><a class="preset-id" data-schoolid=13318>Huron</a> </li>
<li><a class="preset-id" data-schoolid=99999>Pioneer</a></li>
<li>
<input type="number" min="1" max="100000" class="custom-id-value" placeholder="School ID #" required>
<button class="custom-id"> Go </button>
</a>
</li>
</ul>
</li>
<li><a class="show-calendar">Calendar</a></li>
<li><a class="show-athletes">Athletes</a></li>
</ul>
</nav>
</header>
<main>
<image src="https://www.w3schools.com/w3css/img_lights.jpg"></image>
</main>
Issue with Content Placement when Displayed
The content overlaps the header bar, seeking a way to prevent this and have it positioned below the header. No movement of content below the dropdown menu should occur upon activation.
Link to JsFiddle Example: https://jsfiddle.net/g870xy3d/36/