Patterns menu
Header and utility menu
HTML
<header class="container-fluid site--header">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-lg-4 col-md-4 col-sm-4">
<a class="site--header-logo-link" href="" title="Return to the homepage">
<img class="site--header-logo" src="images/SEPA-Logo.svg" alt="SEPA logo">
</a> <!-- // logo -->
</div>
<div class="col-xxl-8 col-lg-8 col-md-8 col-sm-8">
<ul class="nav utility--nav d-none d-lg-inline-flex float-end" aria-label="utility navigation">
<li class="nav-item"> <a class="nav-link" href=""> Utility 1 </a> </li>
<li class="nav-item"> <a class="nav-link" href=""> Utility 2 </a> </li>
<li class="nav-item"> <a class="nav-link" href=""> Utility 3 </a> </li>
<li class="nav-item"> <a class="nav-link" href=""> Utility 4 </a> </li>
</ul>
<!-- // utility navigation -->
</div>
</div> <!-- // row -->
</div> <!-- // container -->
</header> <!-- // HEADER -->
CSS