hello i just want to know that when my screen is enter in 700px then click on hamburger transition property effect is show the list item content is display in one line
but my code is not display list item content in seprate line and code is display according to the list item data display in navbar
here is my code html
<div class="navbar">
<!-- Navbar logo -->
<div class="nav-header">
<div class="nav-logo">
<a href="#">
<img src="logo.png" width="100px" alt="logo">
</a>
</div>
</div>
<!-- responsive navbar toggle button -->
<input type="checkbox" id="nav-check">
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<!-- Navbar items -->
<div class="nav-links">
<nav class="navbar1">
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</nav>
</div>
<div class="btn">
<div class="button1">
<!-- <button class="loginBtn">Login</button> -->
<a href="#" class="loginBtn">Login</a>
</div>
</div>
</div>
css
@media (max-width:700px) {
.navbar .nav-btn {
display: inline-block;
position: absolute;
top: 0px;
right: 300px;
}
.navbar .nav-btn {
display: inline-block;
position: absolute;
top: 0px;
right: 300px;
}
.navbar .nav-btn label {
display: inline-block;
flex-direction: column;
width: 80px;
height: 70px;
padding: 25px;
}
.navbar .nav-btn label span {
display: flex;
flex-direction: column;
height: 10px;
width: 25px;
border-top: 3px solid #eee;
}
.navbar .nav-btn label:hover,
.navbar #nav-check:checked~.nav-btn label {
/* background-color: rgb(9, 14, 90); */
transition: all 0.5s ease;
flex-direction: column;
}
.navbar .nav-links {
position: absolute;
display: block;
text-align: center;
width: 90%;
background-color: rgb(9, 14, 90);
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 70px;
/* right: 150px; */
}
.navbar1 ul li {
display: flex;
flex-direction: column;
}
/* when nav toggle button not checked */
.navbar #nav-check:not(:checked)~.nav-links {
height: 0px;
}
/* when nav toggle button is checked */
.navbar #nav-check:checked~.nav-links {
height: calc(100vh - 70px);
overflow-y: auto;
display: block;
}
.navbar .btn {
padding: 10px 40px;
margin: 20px;
font-size: 18px;
background-color: rgb(9, 14, 90);
display: inline;
color: white;
}
.navbar .btn .button1 {
display: inline-block;
color: white;
}
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.navbar {
display: flex;
height: 70px;
width: 100%;
padding: 19px 30px;
background-color: #1b4cd3;
position: relative;
}
.navbar .nav-header {
display: inline;
}
.navbar .nav-header .nav-logo {
display: inline-block;
margin-top: -7px;
}
.nav-links .navbar1 ul {
display: flex;
}
.navbar1 ul li {
list-style: none;
}
/* responsive navbar toggle button */
.navbar #nav-check,
.navbar .nav-btn {
display: none;
}
@media (max-width:700px) {
.navbar .nav-btn {
display: inline-block;
position: absolute;
top: 0px;
right: 300px;
}
.navbar .nav-btn {
display: inline-block;
position: absolute;
top: 0px;
right: 300px;
}
.navbar .nav-btn label {
display: inline-block;
flex-direction: column;
width: 80px;
height: 70px;
padding: 25px;
}
.navbar .nav-btn label span {
display: flex;
flex-direction: column;
height: 10px;
width: 25px;
border-top: 3px solid #eee;
}
.navbar .nav-btn label:hover,
.navbar #nav-check:checked~.nav-btn label {
/* background-color: rgb(9, 14, 90); */
transition: all 0.5s ease;
flex-direction: column;
}
.navbar .nav-links {
position: absolute;
display: block;
text-align: center;
width: 90%;
background-color: rgb(9, 14, 90);
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 70px;
/* right: 150px; */
}
.navbar1 ul li {
display: flex;
flex-direction: column;
}
/* when nav toggle button not checked */
.navbar #nav-check:not(:checked)~.nav-links {
height: 0px;
}
/* when nav toggle button is checked */
.navbar #nav-check:checked~.nav-links {
height: calc(100vh - 70px);
overflow-y: auto;
display: block;
}
.navbar .btn {
padding: 10px 40px;
margin: 20px;
font-size: 18px;
background-color: rgb(9, 14, 90);
display: inline;
color: white;
}
.navbar .btn .button1 {
display: inline-block;
color: white;
}
/* Responsive dropdown code */
.navbar .nav-links .dropdown,
.navbar .nav-links .dropdown2 {
float: none;
width: 100%;
}
.navbar .nav-links .drop-content,
.navbar .nav-links .drop-content2 {
position: relative;
background-color: rgb(220, 220, 250);
top: 0px;
left: 0px;
}
/* Text color */
.navbar .nav-links .drop-content a {
color: rgb(9, 14, 90);
}
}
/* Dropdown menu CSS code */
.dropdown {
position: relative;
display: inline-block;
}
.drop-content,
.drop-content2 {
display: none;
position: absolute;
background-color: #1b4cd3;
min-width: 120px;
font-size: 16px;
top: 34px;
z-index: 1;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.4);
}
/* on hover show dropdown */
.dropdown:hover .drop-content,
.dropdown2:hover .drop-content2 {
display: block;
}
/* drondown links */
.drop-content a {
padding: 12px 10px;
border-bottom: 1px solid rgb(197, 197, 250);
display: block;
transition: all 0.5s ease !important;
}
.dropBtn .drop-content a:hover {
background-color: rgb(230, 230, 230);
}
.dropdown:hover .dropBtn,
.dropdown2:hover .dropBtn2 {
background-color: rgba(0, 0, 0, 0.3);
}
.dropdown2 .drop-content2 {
position: absolute;
left: 120px;
top: 126px;
}
.dropBtn2 i {
margin-left: 15px;
}html
>Solution :
I assume you want all the list items in columns.
.navbar1 ul li {
display: flex;
flex-direction: column;
}
You are using display flex on li. It should be on ul instead since you have to make the parent a flexbox not the item itself.
This should solve your problem i hope.
.navbar1 ul{
display: flex;
flex-direction: column;
}