As a novice in web programming, I'm facing an issue where the navigation bar shifts to the bottom when the mobile screen size changes. Many solutions online use the hamburger style, which I find less appealing.
Here is how the mobile view looks before resizing:
https://i.sstatic.net/75K1E.png
And here is the view after resizing the screen:
https://i.sstatic.net/5NUev.png
Below is the code snippet causing this problem:
.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;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1849f809f82">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<ul class="nav nav-tabs header">
<li class="nav-item">
<a class="nav-link text aboutbtn" aria-current="page" data-bs-toggle="tab" href="#about"><i class="fas fa-chalkboard-teacher"></i> About Us</a>
</li>
<li class="nav-item">
<a class="nav-link text servicebtn" data-bs-toggle="tab" href="#service"><i class="fas fa-search"></i> Viewrify</a>
</li>
<li class="nav-item">
<a class="nav-link text contactbtn" data-bs-toggle="tab" href="#contact"><i class="fa fa-user" aria-hidden="true"></i> Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text careerbtn" data-bs-toggle="tab" href="#career"><i class="fa fa-camera" aria-hidden="true"></i> Careers</a>
</li>
</ul>Despite trying @media queries, I couldn't resolve the issue and adjusting the width of nav-items did not yield any positive results as shown in the images.