COMM 223 -
Responsive Menu Template

Add this code to your HTML document between the BODY tags

<nav>
  <div class="sidebar">
  	<a class="active" href="index.html">Home</a>
  	<a href="about.html">About</a>
  	<a href="contact.html">Contact</a>
  </div>
</nav> 
  <div class="content">
  	<p>Here is where all of your main content will go, 
    	(besides your menu, header and footer) between these two "content" DIV tags.<p>
  </div>

 

Then use this CSS (by column)in your CSS file. (In other words, ALL the Mobile column, then ALL the Tablet column then ALL the Desktop column.)

  Mobile Tablet or Pad Desktop
 
/*Mobile View*/ 
@media 
(max-width: 430px) {  
}
/*Tablet View*/ 
@media (min-width: 431px) 
and (max-width: 800px) { 
}
/*Desktop View*/ 
@media (min-width: 801px)  {  }
   
.sidebar {
	width: 100%;
	height: auto;
	position: relative;
}
.sidebar {
        margin: 0;
        padding: 0;
        width: 200px;
        background-color: white;
        position: absolute;
        height: 100%;
        overflow: auto;
      }
 
.sidebar a {
	text-align: center;
	display: block;
	border: 2px black solid;
	background-color: blue;
	padding: 5px 10px 5px 10px;
	width: 250px;
	color: aliceblue;
	font-family: sans-serif;
	text-decoration: none;
   }
.sidebar a {
	text-align: center;
	display: inline;
	border: 2px black solid;
	background-color: green;
	padding: 10px;
	width: 250px;
	color: aliceblue;
	font-family: sans-serif;
	text-decoration: none;
   }
.sidebar a {
        display: block;
        color: black;
        padding: 16px;
        text-decoration: none;
        font-family: sans-serif;
        background-color: white;
      }
 
.sidebar a.active {
        background-color:#116AD5;
        color: white;
     }
 
.sidebar a:hover:not(.active) {
        background-color: #555;
        color: white;
     }
   
div.content {
     margin-left: 0;
   }
div.content {
    margin-left: 200px;
    padding: 1px 16px;
    height: 1000px;
   }
 
nav {
    display: flex;
    justify-content: center;
    }