HTML

<nav id="quick-menu" class="quick-menu navbar navbar-expand-lg d-none d-lg-block color-maroon" aria-label="Quick Navigation Links">
	<div class="container-fluid clearfix">

		<ul class="navbar-nav">
			<li class="nav-item university"><a class="nav-link" href="https://my.msstate.edu/">myState <span class="sr-only"> on Mississippi State University</span></a></li>
			<li class="nav-item university"><a class="nav-link" href="https://www.msstate.edu/directory/">Directory <span class="sr-only"> on Mississippi State University</span></a></li>
		</ul>

		<ul class="navbar-nav ms-auto site-links site-links--black">
			<li class="nav-item"><a class="nav-link" href="#">Apply Now</a></li>
			<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
		</ul>

		<ul id="social-header" class="social-header navbar-nav" role="navigation" aria-label="Social Media Header Links">
			<li class="nav-item">
				<a class="nav-link social-icon facebook" href="#" title="Find Website Name on Facebook">
					<span class="sr-only">Find Website Name on Facebook</span>
					<span class="fab fa-facebook"></span>
				</a>
			</li>
		</ul>

		<form class="search-form d-flex" role="search" action="https://www.msstate.edu/site-index/" method="get" aria-label="Search MSState">
			<label for="search-terms" class="sr-only">Search MSState</label>
			<button class="btn btn-white" title="Search MSState" aria-label="Toggle quick search field" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-search-quick" aria-expanded="false" aria-controls="collapse-search-quick">
				<span class="fas fa-search"></span>
				<span class="fas fa-times d-none"></span>
				<span class="sr-only">Toggle quick search field</span>
			</button>
			<div class="input-group collapse" id="collapse-search-quick">
				<input class="form-control" id="search-terms" name="terms" placeholder="Search MSState" type="text">
				<button class="btn btn-gray-200 text-black" title="Search" aria-label="Search" type="submit">
					Search
				</button>
			</div>
		</form>
		
	</div>
</nav>

<header id="msu-header" class="clearfix msu-header msu-header-maroon" aria-label="Primary header for Website Name">
	<div class="container-fluid clearfix">
		<div class="row">
			
			<div class="col-md align-self-center logo-container">
				<a id="logo" href="#" title="Home">
					<img src="https://cdn01.its.msstate.edu/i/logos/msstate/HORIZONTAL_WEB_white_maroon_m.svg" alt="Logo for Website Name" title="Website name" />
				</a>
			</div>

		</div>
	</div>
</header>

<nav id="main-menu" class="main-menu navbar navbar-expand-lg d-none d-lg-block color-black" aria-label="Primary Desktop Navigation">
	<div class="container-fluid clearfix">
		<div id="main-menu-container" class="menu-container bootstrap-dropdown-hover"> 

			<ul class="menu--main navbar-nav">
				<li class="nav-item">
					<a href="#" id="menu-main--home" class="nav-link">Home</a>
				</li>
				<li class="nav-item dropdown">
					<a href="#" id="menu-main--academics" class="nav-link" aria-haspopup="true" aria-expanded="false">Academics</a>
					<div class="dropdown-menu px-3">
						<a href="#" class="dropdown-item">Academic Opportunities</a>
						<a href="#" class="dropdown-item">Concentrations in Pre-Professional Programs</a>
						<a href="#" class="dropdown-item">Important Dates</a>
					</div>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--visit-msu" class="nav-link">Visit MSU</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--news" class="nav-link">News</a>
				</li>
				<li class="nav-item">
					<a href="#" id="menu-main--about" class="nav-link">About</a>
				</li>
			</ul>

		</div>	
	</div>
</nav>