chriskavanagh/nav-background.css

## nav-background.css
@import url('https://fonts.googleapis.com/css?family=Work+Sans:300,600');

:root {
    --background:rgb(204, 190, 190);
    font-size: 16px;
    font-family: Georgia,Times,Times New Roman,serif;
    background-color: #ffffff;
  }

* {
    padding: 0;
    margin:0;
    /*font-family: "Helvetica", sans-serif;*/
    text-decoration: none;
    list-style-type: none;
}

body {
    line-height: 1.3;
}

h1 {
    font-size: 2.0rem;
}

#nav-background {
    background: var(--background);
    position: fixed;
    top: 0;
    z-index: 9000;
    width: 100%;
    background-color: gray;
    border-bottom: 2px solid rgb(27, 0, 0);
}

#nav-container {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
}

#logo {
    position: absolute;
    top: 2px;
    right: 12px;
    font-size: 2.7rem;
    cursor: pointer;
    display: block;
    color: purple;
}

li:hover {
    background: white;
}

.nav-ul {
    display: block;
}

.nav-ul.responsive {
    display: none;
    overflow: hidden;
}

li {
    padding: 15px 15px;
    border-bottom: 1px solid rgba(219, 219, 219, 0.5);
    font-size: 1.0rem;
    text-transform: uppercase;
}

#nav-header {
    height: 50px;
    margin: 0px 0;
    border-bottom: 1px solid rgba(219, 219, 219, 0.5);
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 769px) {
    #nav-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        max-width: 1000px;
    }
    #nav-header {
        display: flex;
        flex-direction: row;
        border: none;
    }
    #logo {
        display: none;
    }
    .nav-ul {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    li {
        border: none;
        display: inline-block;
    }
    li a:hover {
        background: white;
    }
    .nav-ul.responsive {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}

## nav-background.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Responsive Header Nav</title>
    <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1">
    <link rel="stylesheet" href="css/nav-background.css">
</head>
<body>
    <nav>
        <div id="nav-background">
            <div id="nav-container">
                <header id="nav-header">
                    <h1><a href="#">Home-Office</a></h1>
                    <span id="logo">&equiv;</span>
                </header>
                <ul class="nav-ul responsive" id="mynav">
                    <li><a href="#" class="nav-item">Home</a></li>
                    <li><a href="#" class="nav-item">Services</a></li>
                    <li><a href="#" class="nav-item">Design</a></li>
                    <li><a href="#" class="nav-item">Blog</a></li>
                    <li><a href="#" class="nav-item">Contact</a></li>
                </ul>
            </div>
        </div>
   </nav>

   <div class="box-1">
       Test Box-1
   </div>
   <div class="box-2">
       <div class="box-3">test</div>
   </div>

   <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
   <script>
    $('#logo').on('click', function(){
        $('.nav-ul').toggleClass('responsive');
    });
  </script>
</body>
</html>