CSS responsive menu - html

Question

I am having problem in my responsive menu. When i click the menu navigation, all the list is show horizontal. But i want it to be vertical which means that only 1 list in 1 line. Please help me, i am new to programming
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
float: left;
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
float: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: 85px;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
float: left;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>

Answer 1

Set width of li to 100%
ul.topnav.responsive li {
width: 100%;
}
ul.topnav.responsive{
padding-left:0;
}
Fixed Your snippet
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
float: left;
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
float: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: 85px;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
float: left;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
ul.topnav.responsive li {
width: 100%;
display: inline-block;
}
ul.topnav.responsive{
padding-left:0;
}
ul.topnav.responsive li.icon {
width: auto;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>

Answer 2

You can try clearing each list item .menu ul li adding clear:both; but you really should pull the nav trigger out of the list of menu items so that you can limit the size of your ul more easily and negate the use of clears entirely.
Try and HTML architecture like this:
<div class="menu-wrap">
<a class="menu-trigger" href="#" onclick="">☰</a>
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
</ul>
</div>

Answer 3

.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
float: right;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive li {
display: block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
/* height: 85px;*/
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
}
.menu ul li {
list-style: none;
width: auto;
margin-right: -4px;
}
.menu ul li a {
display: inline-block;
height: 85px;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home
</li>
<li>about
</li>
<li>Services
</li>
<li>Register
</li>
<li class="icon">
☰
</li>
</ul>

Answer 4

<style>
.menu ul.topnav li:not(:first-child) {
display: none;
}
.menu ul.topnav li.icon {
display: inline-block;
position: absolute;
right: 0;
top: 0;
}
.menu ul.topnav.responsive {
position: relative;
}
.menu ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
background: none;
display: inline-block;
width: auto;
}
.menu ul.topnav.responsive li {
float: none;
width:100%;
display: inline-block;
background-color: #0099FF;
}
.menu ul.topnav.responsive li a {
display: block;
text-align: left;
}
.menu ul.topnav.responsive li.icon a {
float:right;
background: #016fb9;
}
.menu ul.topnav.responsive li.icon a:hover {
color:#fff;
}
.menu-wrap {
background: #1a202c;
overflow: hidden;
width: 100%;
}
.menu {
width: 70.2782%;
height: auto;
margin-top: 80px;
background-color: #0099FF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.menu ul {
background-color: #0099FF;
display:inline-block;
width:100%;
float:none;
padding-left:0;
position:relative;
}
.menu ul li {
list-style: none;
float: none;
width: auto;
}
.menu ul li a {
display: inline-block;
height: auto;
line-height: 85px;
padding-left: 30px;
padding-right: 30px;
font-size: 14px;
font-family: 'Oswald', sans-serif;
color: #ffffff;
border-right: #0099FF solid 1px;
text-transform: uppercase;
}
.menu ul li a:hover {
background: #e1ece7;
color: #1a202c;
}
.menu ul li a.active {
background: #e1ece7;
color: #1a202c;
}
</style>
<script>
function myFunction() {
document.getElementsByClassName("topnav")[0].classList.toggle("responsive");
}
</script>
<div class="menu-wrap">
<div class="menu">
<ul class="topnav">
<li>home </li>
<li>about </li>
<li>Services </li>
<li>Register </li>
<li class="icon"> ☰ </li>
</ul>

Answer 5

please find the same example in [js fiddle][https://jsfiddle.net/yhq1pzhj/]1
<script>
function openNav() {
$("#mySidenav").css('width', '150px');
}
function closeNav() {
$("#mySidenav").css('width', '0px');
}
</script>
<div>
<div id="mySidenav" class="sidenav">
X
home
about
Services
Register
</div>
<i class="fa fa-bars" style="font-size:32px;cursor:pointer;padding-left: 35px;padding-top: 15px;" onclick="javascript:openNav()"></i></div>
======css======
.sidenav {
/* height: 100%; */
width: 0;
position: fixed;
z-index: 1;
/* top: 0;
left: 0; */
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}
.sidenav a:hover,
.offcanvas a:focus {
color: #f1f1f1;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}