CODEWITHSUNDEEP
csslaravel-8bootstrap-5
新Acesyyy
新Acesyyy

Reputation: 1198

Navbar auto responsive in mobile version

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

Navbar Current screen mobile

This is the view after changing the view to smaller size

After changing view

Here is the code:

.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/[email protected]/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>

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

Upvotes: 0

Views: 296

Answers (1)

ruleboy21
ruleboy21

Reputation: 6371

It can easily be done with flexbox. Kindly try this

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

Upvotes: 1

Related Questions