Header / Navigation

Description

The header / navigation is used to help users know what website they are on, what the site has to offer, and where they are. No matter the size of device, the logo is on the left. On the right are the links to sub-pages within the site. At the xs, sm, and md breakpoints (<768px), the links are condensed into a hamburger menu that opens vertically when clicked on. For the larger screens, the links are expanded and can be easily viewed. A blue underline is used to show the user what page they are currently on. The height at all screen sizes is 75px.

Usage

This should be used on every page. It should be fixed to the top so that it shows even when the user scrolls down the page.

Accessibility

The header and nav semantic tags should be used for optimal accessibility. When the links are condensed, appropriate aria labels should be used.

Examples

Desktop

For large and extra-large screen sizes like those on a desktop or laptop:

Tablet

For small and medium screen sizes like those on a tablet:

Mobile

For extra small screen sizes like those on a mobile phone:

Code


         <nav class="navbar navbar-expand-lg navbar-light fixed-top bg-white border-bottom">
            <div class="container">
                <a class="navbar-brand" href="index.html"><img src="images/LogoLockupColorSquare.png" 
                alt="Melissa Boyce's Logo"></a>


                <button class="navbar-toggler back-light-blue-hover" type="button" data-toggle="collapse" 
                   data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" 
                   aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span>
                </button>


                <div class="collapse navbar-collapse" id="navbarCollapse">

                    <ul class="navbar-nav ml-auto">

                        <li class="nav-item active">
                            <a class="nav-link" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="about.html">About</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="resume.html">Resume</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="portfolio.html">Portfolio</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="designsystem.html">Design System</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="contact.html">Contact</a>
                        </li>

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