navbar is not appropriate - html

Question

Picture for navbar :
Expected :
Reality :
can I get fix for that
my navbar code
<nav class="navbar navbar-default navbar fixed-top">
<div class="container-fluid">
<div class="navbar-header">
NavbarBrand
</div>
<nav class="nav navbar-nav navbar-right">
<li>Link</li>
<li>A</li>
<li>A</li>
</ul>
</div>
</nav>

Answer 1

a:link {
color: gray;
}
.nav-link:hover {
color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<nav class="nav bg-dark text-white">
<a class="nav-link active" href="#">Active</a>
<a class="nav-link" href="#">Link</a>
<a class="nav-link" href="#">Link</a>
</nav>
also check this fiddle.
for get navbar middle of the page use <ul class="nav justify-content-center"> for get the nav at right side of page use <ul class="nav justify-content-end"> for more about bootstrap basenav

Answer 2

<div class="navigation">
<div class="navigation__container">
<div class="navigation__container_logo">
NavbarBrand
</div>
<nav class="navigation__container_menu">
<ul class="navigation__container_menu_list">
<li class="navigation__container_menu_list--item">
link
</li>
<li class="navigation__container_menu_list--item">
link
</li>
</ul>
</nav>
</div>
</div>
.navigation{
padding: 10px;
&__container{
display: flex;
align-items: center;
border: solid 1px #000;
border-right-color: transparent;
border-left-color: transparent;
padding: 5px 20px;
&_logo{
max-width: 100%;
}
&_menu{
flex: 1;
max-width: 100%;
&_list{
display: flex;
justify-content: flex-end;
align-items: center;
&--item{
margin-right: 10px;
> a{
color: #000;
font-size: 12px;
}
&:hover{
>a {
color:#f90;
}
}
}
}
}
}
}

Answer 3

HTML
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img class="logo horizontal-logo" src="LOGO link" alt="logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</div>
</nav>
CSS
body {
background: #f2f2f2;
}
.navbar .nav-item:not(:last-child) {
margin-right: 35px;
}
.dropdown-toggle::after {
transition: transform 0.15s linear;
}
.show.dropdown .dropdown-toggle::after {
transform: translateY(3px);
}
.dropdown-menu {
margin-top: 0;
}
JS
const $dropdown = $(".dropdown");
const $dropdownToggle = $(".dropdown-toggle");
const $dropdownMenu = $(".dropdown-menu");
const showClass = "show";
$(window).on("load resize", function() {
if (this.matchMedia("(min-width: 768px)").matches) {
$dropdown.hover(
function() {
const $this = $(this);
$this.addClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "true");
$this.find($dropdownMenu).addClass(showClass);
},
function() {
const $this = $(this);
$this.removeClass(showClass);
$this.find($dropdownToggle).attr("aria-expanded", "false");
$this.find($dropdownMenu).removeClass(showClass);
}
);
} else {
$dropdown.off("mouseenter mouseleave");
}
});

Answer 4

Hi I have read your code and I had previously solved the same issue for someone else, I have made a small and simple navigation system in CodePen which will help you fix the alignment issue of your navigation system. Additionally, there are three line of code which do not need to be there in the html file. They are <div class="container-fluid"> and <li>A</li> and <nav class="navbar navbar-default navbar fixed-top">.
When building the navigation system you do not need to declare that it is a navigation bar in the html file, the <ul> tag and <li> tag are an unordered list in the first place and all navigation bars are an unordered list. Furthermore, I have added the CSS code to help you fix the alignment of the unordered list, and there is a code which will sort out any white space in you navigation system
Additionally, the navigation bar in the link below does not use any bootstrap tools, the navigation bar is purely css and html. I hope this link is helpful
Here is a link below:
[https://codepen.io/X_Viperxz72/pen/zYrEZGB]