style.css

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');

header{
background: #22c8d4;
width: 100%;
height: 76px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
border-bottom: 5px solid #22c8d4;
}

ul{
list-style: none;
}

li{
display: inline-block;
float: left;
padding: 10px;
}

a{
color: #fff;
text-decoration: none;
font-weight: bold;
}

a:hover{
text-decoration: underline;
color:black;
}

#logo{
margin: 20px;
float: left;
width: 200px;
height: 50px;
background: url(#) no-repeat center;
display: block;
}

nav{
float: right;
padding: 20px;
font-family: 'Open Sans', sans-serif;
}

#menu-icon{
background: url(menu-icon.png);
display: hidden;
width: 32px;
height: 32px;
}

@media only screen and (max-width: 640px) {
	header {
		position: absolute;
	}
	#menu-icon {
		display: inline-block;
	}
	nav ul, nav:active ul {
		display: none;
		position: absolute;
		padding: 20px;
		background: #c5c5c5;
		right: 10px;
		top: 65px;
		width: 35%;
	}
	nav:hover ul {
		display: block;
	}
	nav li {
		text-align: center;
		width: 100%;
		padding: 15px 0;
		margin: 0;
	}
}