list item content is not display in seprate line when click on hamburger-CodePudding

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 >
 
    <!-- Navbar logo -->
    <div >
      <div >
        <a href="#">
          <img src="logo.png" width="100px" alt="logo">
        </a>
      </div>
    </div>
 
    <!-- responsive navbar toggle button -->
    <input type="checkbox" id="nav-check">
    <div >
      <label for="nav-check">
        <span></span>
        <span></span>
        <span></span>
      </label>
    </div>
 
    <!-- Navbar items -->
    <div >
      <nav >
        <ul>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
            <li>home</li>
        </ul>
      </nav>
    
      
    </div>
   
    <div >
    <div >
        <!-- <button >Login</button> -->
        <a href="#" >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

CodePudding user response：

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;
    }