onuproy/index.html

## index.html
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>An Anonymous Pen on CodePen</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<header>
    <label for="toggle-1" class="toggle-menu"><ul><li></li> <li></li> <li></li></ul></label>
    <input type="checkbox" id="toggle-1">

    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About</a></li>
            <li><a href="">Portfolio</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Gallery</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
</header>
<!-- partial -->

</body>
</html>

## style.css
nav {
    width: auto;
    float: right;
}

nav ul {
    display: table;
    float: right;
}

nav ul li {
    float: left;
}

nav ul li a {
    color: #002e5b;
    font-size: 18px;
    padding: 25px 20px;
    display: inline-block;
    transition: all 0.5s ease 0s;
}

nav ul li a:hover {
    background-color: #002e5b;
    color: #fde428;
    transition: all 0.5s ease 0s;
}

nav ul li a:hover i {
    color: #fde428;
    transition: all 0.5s ease 0s;
}

nav ul li a i {
    padding-right: 10px;
    color: #002e5b;
    transition: all 0.5s ease 0s;
}

.toggle-menu ul {
    display: table;
    width: 25px;
}

.toggle-menu ul li {
    width: 100%;
    height: 3px;
    background-color: #002e5b;
    margin-bottom: 4px;
}

.toggle-menu ul li:last-child {
    margin-bottom: 0px;
}

input[type=checkbox],
label {
    display: none;
}

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

    input[type=checkbox] {
        position: absolute;
        top: -9999px;
        left: -9999px;
        background: none;
    }
    input[type=checkbox]:fous {
        background: none;
    }
    label {
        float: right;
        padding: 8px 0px;
        display: inline-block;
        cursor: pointer;
    }
    input[type=checkbox]:checked ~ nav {
        display: block;
    }
    nav {
        display: none;
        position: absolute;
        right: 0px;
        top: 53px;
        background-color: #002e5b;
        padding: 0px;
        z-index: 99;
    }
    nav ul {
        width: auto;
    }
    nav ul li {
        float: none;
        padding: 0px;
        width: 100%;
        display: table;
    }
    nav ul li a {
        color: #FFF;
        font-size: 15px;
        padding: 10px 20px;
        display: block;
        border-bottom: 1px solid rgba(225, 225, 225, 0.1);
    }
    nav ul li a i {
        color: #fde428;
        padding-right: 13px;
    }
}
	<!DOCTYPE html>
	<html lang="en" >
	<head>
	<meta charset="UTF-8">
	<title>An Anonymous Pen on CodePen</title>
	<link rel="stylesheet" href="./style.css">

	</head>
	<body>
	<!-- partial:index.partial.html -->
	<header>
	<label for="toggle-1" class="toggle-menu"><ul><li></li> <li></li> <li></li></ul></label>
	<input type="checkbox" id="toggle-1">

	<nav>
	<ul>
	<li><a href="">Home</a></li>
	<li><a href="">About</a></li>
	<li><a href="">Portfolio</a></li>
	<li><a href="">Services</a></li>
	<li><a href="">Gallery</a></li>
	<li><a href="">Contact</a></li>
	</ul>
	</nav>
	</header>
	<!-- partial -->

	</body>
	</html>
	nav {
	width: auto;
	float: right;
	}

	nav ul {
	display: table;
	float: right;
	}

	nav ul li {
	float: left;
	}

	nav ul li a {
	color: #002e5b;
	font-size: 18px;
	padding: 25px 20px;
	display: inline-block;
	transition: all 0.5s ease 0s;
	}

	nav ul li a:hover {
	background-color: #002e5b;
	color: #fde428;
	transition: all 0.5s ease 0s;
	}

	nav ul li a:hover i {
	color: #fde428;
	transition: all 0.5s ease 0s;
	}

	nav ul li a i {
	padding-right: 10px;
	color: #002e5b;
	transition: all 0.5s ease 0s;
	}

	.toggle-menu ul {
	display: table;
	width: 25px;
	}

	.toggle-menu ul li {
	width: 100%;
	height: 3px;
	background-color: #002e5b;
	margin-bottom: 4px;
	}

	.toggle-menu ul li:last-child {
	margin-bottom: 0px;
	}

	input[type=checkbox],
	label {
	display: none;
	}

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

	input[type=checkbox] {
	position: absolute;
	top: -9999px;
	left: -9999px;
	background: none;
	}
	input[type=checkbox]:fous {
	background: none;
	}
	label {
	float: right;
	padding: 8px 0px;
	display: inline-block;
	cursor: pointer;
	}
	input[type=checkbox]:checked ~ nav {
	display: block;
	}
	nav {
	display: none;
	position: absolute;
	right: 0px;
	top: 53px;
	background-color: #002e5b;
	padding: 0px;
	z-index: 99;
	}
	nav ul {
	width: auto;
	}
	nav ul li {
	float: none;
	padding: 0px;
	width: 100%;
	display: table;
	}
	nav ul li a {
	color: #FFF;
	font-size: 15px;
	padding: 10px 20px;
	display: block;
	border-bottom: 1px solid rgba(225, 225, 225, 0.1);
	}
	nav ul li a i {
	color: #fde428;
	padding-right: 13px;
	}
	}