here is my nav,. how do i make the menu bar with three horizontal lines as a drop down when on a small screen such as an iphone.

body {

margin: 0;

background-color: #FAF7F4;

}

ul.topnav {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #1E1E1E;

}

ul.topnav li {float: right;}

ul.topnav li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

}

ul.topnav li a:hover:not(.active) {background-color: #8D8D8D;}

ul.topnav li a.active {

background: #fd540b; /* For browsers that do not support gradients */

background: -webkit-linear-gradient(#fd540b, #f43e7f); /* For Safari 5.1 to 6.0 */

background: -o-linear-gradient(#fd540b, #f43e7f); /* For Opera 11.1 to 12.0 */

background: -moz-linear-gradient(#fd540b, #f43e7f); /* For Firefox 3.6 to 15 */

background: linear-gradient(#fd540b, #f43e7f); /* Standard syntax (must be last) */

}

#content{

margin:0;

padding:0;

color: black;

}

#container{

}

p{

padding: 2%;

font-family: 'Alegreya Sans SC','Actor',"Comic Sans MS","Times New Roman", Times, serif;;

font-size: 22px;

float: left;

}

#topHeader{

padding: 10px;

text-align: center;

clear: both;

}

h1{

text-decoration: underline;

}

img{

margin-top: 2%;

max-height: 140;

max-width: 13%;

animation: fadein 6s;

}

@keyframes fadein {

from { opacity: 0}

to { opacity: 1}

}

@media screen and (max-width: 600px){

ul.topnav li.right,

ul.topnav li {float: none;}

}

• Contact
• Resume
• Dog
• Food
• Coding Projects
• About
• Home

About

Web Developer, Foodie and Dog Enthusiast

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget accumsan arcu.

Nam id lacus dolor. Cras sit amet nunc justo. Etiam scelerisque purus id nisi blandit, auctor faucibus sem congue.

Integer porta lorem sed nibh vestibulum feugiat.

Aliquam dignissim justo eu risus fermentum, pharetra auctor enim sagittis.

Nunc ornare massa libero, at dictum lorem facilisis vitae. Quisque tempor nisi et ultricies mattis. Phasellus sodales imperdiet urna vel fringilla. Sed enim lectus, auctor et est ut, mattis vehicula est. Duis finibus porta porta. In hac habitasse platea dictumst. Fusce nec eros faucibus felis facilisis dignissim. Quisque ac sapien commodo purus commodo volutpat. Nulla ipsum lorem, accumsan quis commodo id, porttitor in erat. Aenean viverra non diam eu auctor.