How to make a navbar responsive bootstrap - laravel

Question

Hello i am trying to make a navbar in laravel with bootstrap, i am not that good in front-end so i am learning. The navbar in bigger screen shows good but in smaller one the buttons are more to the right side of the screen. This is the code that i have done:
Html:
<div>
<nav id="sidebar" class="active">
<div class="text-start">
<div class="sidebar-header">
<img src="{{ asset('assets/img/cash-flow.png') }}" class="image" alt="logo" class="app-logo">
</div>
<div class="horizontal-menu">
<div class="row">
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-home"></i> Dashboard</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-list"></i>
Veprime</button>
<div class="dropdown-content">
<i class="fas fa-solid fa-plus"></i> Porosite
<i class="fas fa-money-bill-wave"></i> Konfirmo shpenzim
<i class="fas fa-receipt"></i> Konfirmo Arketim
<i class="fas fa-solid fa-user-pen"></i> Veprimet e mia
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-check-to-slot"></i> Arka</button>
<div class="dropdown-content">
<i class="fas fa-cash-register"></i> Arka
<i class="fas fa-coins"></i> Konvertim
<i class="fas fa-solid fa-hand-holding-dollar"></i> Monedhat
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton">
<i class="fas fa-solid fa-screwdriver-wrench"></i> Administrimi</button>
<div class="dropdown-content">
<i class="fas fa-user"></i> Perdoruesit
<i class="fas fa-random"></i> Rolet
</div>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-solid fa-file-invoice"></i> Faturimi</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<button class="dropDownButton"><i class="fas fa-regular fa-share-from-square"></i> Shpenzimet e mia</button>
</div>
</div>
<div class="col-sm-1">
<div class="dropdown">
<a href="#" id="nav2" class="nav-item nav-link dropdown-toggle text-secondary" data-bs-toggle="dropdown" aria-expanded="false"> <button class="dropDownButton">
<i class="fas fa-user"></i> <span>{{ auth()->user()->name }}</span>
</button></a>
<div class="dropdown-profile">
<i class="fas fa-address-card"></i> Profili
<a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="dropdown-item">
<i class="fas fa-sign-out-alt">
</i> Logout
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
#include('partials.menu-horizontal')
CSS
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!--Font Awesome-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
rel="stylesheet"
/>
<!-- Google Fonts-->
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
rel="stylesheet"
/>
<!--MDB-->
<link
href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.css"
rel="stylesheet"
/>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/6.1.0/mdb.min.js"
></script>
<style>
.dropDownButton {
background-color: white;
color: #6c757d;
padding: 16px;
font-size: 16px;
border: none;
width:200px;
}
.horizontal-menu{
width:850%;
top:10px;
margin-left: 210%;
}
.dropdown {
width:90px;
margin-top: -55px;
margin-left: 6%;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 200%;
z-index: 1;
}
.dropdown-profile {
display: none;
position: absolute;
background-color: #f1f1f1;
width: 220%;
z-index: 1;
}
.dropdown-profile a{
color: black;
padding: 12px 16px;
text-decoration: none;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
a{
color:#6c757d;
}
.dropdown-content a:hover {background-color: #2196f3; color:white;}
.dropdown-item:hover {background-color: #2196f3; color:white;}
.dropdown:hover .dropdown-profile {display: block;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropDownButton {background-color: #2196f3; color:white;}
.image{
width:100px;
height:48px;
margin-left: 150%;
}
</style>
How it looks like in smaller screen:
How it looks in bigger screen:
As you can see the admin is off the screen i need the navbar to stay static to the changes. My css is for sure bad as i said im learning.

Answer 1

This is not the proper way of using navbar of bootstrap.
Check out this method in which the use of css is minimal, and mosly used boostrap class and components
.navbar-logo {
width: 140px;
}
.dropdown-menu{
background-color: #f1f1f1;
}
.dropdown-item > i ,.nav-link > i{margin-right:8px;}
.nav-link{white-space:nowrap}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="img-fluid navbar-logo" src="https://cashflow.io/wp-content/uploads/2021/03/CashflowLogo.png" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-home"></i>Dashboard</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-list"></i>Veprime
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-plus"></i>Porosite</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-money-bill-wave"></i>Konfirmo shpenzim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-receipt"></i>Konfirmo Arketim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-user-pen"></i>Veprimet e mia</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-check-to-slot"></i>Arka
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-cash-register"></i>Arka</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-coins"></i>Konvertim</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-solid fa-hand-holding-dollar"></i>Monedhat</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-solid fa-screwdriver-wrench"></i>Administrimi
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-user"></i>Perdoruesit</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-random"></i>Rolet</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-solid fa-file-invoice"></i>Faturimi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-regular fa-share-from-square"></i>Shpenzimet e mia</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fas fa-user"></i>Admin
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#"><i class="fas fa-address-card"></i>Profili</a></li>
<li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt">
</i>Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>

Answer 2

I fixed my code by using this example in W3SCHOOLS. Code Example