The Navigation Menu will adhere to the top of the screen and enclose three main pages: Home, Work, and Contact. The Navigation menu will be displayed in all white. Here, a drop shadow is used to differentiate the Navigation Menu from the background. When users hover over the menu items, the text becomes bold. The selected page will also appear in bold within the menu. Resize the window to watch the Navigation Menu's responsive behaviors.

Usage

Navigation will be visible on every page
Navigation will stick to the top of the page when scrolling
Hamburger navigation icon will be visible on tablet and mobile-sized screens

Accessibility

The text markup for the Navigation Menu will utilize aria's to indicate which page is current or active. The menu will contain links not buttons to align with appropriate semantics for screenreaders. Icons within the Navigation Menu will use alt text.

Code Snippets




 <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="../index.html">
    <img class="logo_nav" src="../img/color_logo.png" 
    alt="color logo of author's initials">
    <a>
    <button class="navbar-toggler custom-toggle-icon" type="button"
     data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown
     " aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end nav-bg" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
         <li class="nav-item">
           <a class="nav-link" href="#">Work</a>
         </li>
        <li class="nav-item">
           <a class="nav-link" href="#">Contact</a>
          </li>
      </ul>
    </div>
</nav>
<div class="border">
      </div>