Navbar auto responsive in mobile version-CodePudding

I'm currently a beginner with web programming, I have a problem when the mobile screen changed then the navbar will go bottom, I don't see any good source codes of this problem since some of the people use hamburger style.

This is the current view of the mobile when im not changing it to smaller view

This is the view after changing the view to smaller size

This is the HTML code:

    <ul >
        <li >
            <a  aria-current="page" data-bs-toggle="tab" href="#about"><i ></i> About Us</a>
        </li>
        <li >
            <a  data-bs-toggle="tab" href="#service"><i ></i> Viewrify</a>
        </li>
        <li >
            <a  data-bs-toggle="tab" href="#contact"><i  aria-hidden="true"></i> Contact Us</a>
        </li>
        <li >
            <a  data-bs-toggle="tab" href="#career"><i  aria-hidden="true"></i> Careers</a>
        </li>
    </ul>

This is my CSS code (DESKTOP VIEW):

.servicebtn, .contactbtn, .careerbtn, .aboutbtn {
height: 40px;
}

@font-face {
    font-family: "bebas";
    src: url('font-family/bebas/BEBAS.woff') format('woff');
}

@font-face {
    font-family: "cairo";
    src: url('font-family/cairo/Cairoreg.ttf') format('truetype');
}

.servicebtn, .contactbtn, .careerbtn, .aboutbtn {
    font-family: cairo;
    text-transform: capitalize;
}

.nav-item {
    background-color: black !important;
    border-radius: 10px 10px 0px 0px;
}

.nav-item:hover,
.nav-item:focus {
    background-color: #01FF9D !important;
    color: white;
    border-radius: 10px 10px 0px 0px;
}

.boder {
    background-color: grey !important;
    color: black;
}

.active:focus {
    background-color: #01FF9D !important;
    color:white !important;
}

.nav-link  {
    color: white;
    border-radius: 10px 10px 0px 0px;
}

.nav-link:focus,
.nav-link:hover {
    color: white;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    color: black;
    background-color: #01FF9D !important;
    border-color: transparent !important;
    border-radius: 10px 10px 0px 0px !important;
}

Well in @media I removed it cause it's not working :/ and i don't have any idea how to do it, If i changed the width of the nav-items then it's still the same in the image

CodePudding user response：

It can easily be done with flexbox. Kindly try this

ul.nav.header {
    display: flex;
    flex-wrap: nowrap;
}