I'm facing an issue while trying to add a navbar with a navbar-brand to my website. It seems like the image I have included is causing the nav-items to not align properly at the top of the window. Here is a snapshot of the problem: https://i.sstatic.net/FBNlI.png
Interestingly, when I remove the navbar-brand, the items align perfectly at the top (you can see this by testing my code below).
Here's the code snippet:
.logo_1 {
width:9%;
height: auto;
}
.logo_nom {
width: 14%;
height: auto;
}
.nav {
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
width: 100%; /* Full width */
}
.navbar-custom {
background-color: #fafafc;
}
/* Change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
color: #369d4a !important;
}
/* Change the link color */
.navbar-custom .navbar-nav .nav-link {
color: #369d4a !important;
}
/* Change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
color: #2b5c35 !important;
}
.navbar-custom .navbar-brand {
color:#369d4a;
}
.navbar-custom .navbar-toggle {
background-color:#369d4a;
}
.navbar-custom .icon-bar {
background-color:#369d4a;
}
@media (max-width: 1250px) {
.nav-item:hover {
background-color: #5eb56f;
}
}
.dropdown-item {
color : #369d4a !important;
}
.dropdown-item:hover {
background-color: #5eb56f !important;
color: #2b5c35 !important;
}
@media all and (min-width: 992px) {
.nav .nav-item .dropdown-menu{ display: none; }
.nav .nav-item:hover .nav-link{ color: #fff; }
.nav .nav-item:hover .dropdown-menu{ display: block; }
.nav .nav-item .dropdown-menu{ margin-top:0; }
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="test2.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<!-- Begin navbar -->
<nav class="nav navbar-expand-lg navbar-custom navbar-dark" aria-label="Eighth navbar example">
<div class="container">
<div class="row" style="margin: 0; padding: 0;">
<a class="navbar-brand">
<img src="logo_no_text.png" alt="Logo" class="logo_1 img-responsive">
<img src="nom_commerce.png" alt="Logo" class="logo_nom img-responsive">
<button class="navbar-toggler navbar-toggle btn_small_screen float-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ml-auto" >
<li class="nav-item">
<a class="nav-link px-3" href="">Test 1</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 2</a>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle " data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Test 4 </a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Test 4.1</a>
<a class="dropdown-item" href="#">Test 4.2</a>
<a class="dropdown-item" href="#">Test 4.3</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link px-3" href="">Test 5</a>
</li>
</ul>
</div>
</div></div>
</nav>
<!-- End navbar -->
<!-- Script -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>