I noticed some small paddings within the .container-fluid class, but I didn't see any margins in the rest of the code.
.navbar {height: 50px; color: #2a4068; margin-bottom: 0px;}
.navbar-default {color: #2a4068; background: #d8dfea; border-bottom: solid 0px #2a4068;box-shadow: 0px 1px 2px 0px #2a4068;}
.container {height: 50px;padding-left: 0px;padding-right: 0px;}
.navbar-header {height: 50px;margin-left: 0px;margin-right: 0px;}
.navbar-collapse {padding-left: 0px;padding-right: 0px;}
.navbar-nav {margin-right: 0px;margin-left: 0px;padding-left: 0px;padding-right: 0px;margin: 0px 0px;}
.navbar-right {padding-left: 0px;padding-right: 0px;margin-right: 0px;}
.logoImage {z-index: 1; margin-top: -7px;margin-bottom: 20px;}
.navbar-nav li {text-align: center;border-radius: 4px;color: #2a4068;cursor: pointer;}
.navbar-nav li:hover{background-color: #99b1d7;color: #2a4068;opacity: 0.7;}
#nav_links {display: block;color: #2a4068;font-weight: bold;}
#navbar_menu {width: 100%;margin-right: 0;margin-top: -10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand logoImage" href="index.php">
<img src="images/logo_large.png" title="Asserter" alt="logo" width="110" height="35" class="large-logo" id="brand-image"/>
</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse navHeaderCollapse" id="navbar_menu">
<ul class="nav navbar-nav navbar-right">
<li class=""><a href="" class="" id="nav_links">Front</a></li>
<li class=""><a href="" class="" id="nav_links">Admin</a></li>
<li class=""><a href="" class="" id="nav_links">Profile</a></li>
<li class=""><a href="" class="" target="_blank" id="nav_links">Chat</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" id="nav_links">Notifications</a>
<ul class="dropdown-menu">
<li><a href="" id="nav_links">Facebook</a></li>
<li><a href="" id="nav_links">Twitter</a></li>
<li><a href="" id="nav_links">Instagram</a></li>
</ul>
</li>
<li class=""><a href="" class="" id="nav_links">Settings</a></li>
<li class=""><a href="" class="" id="nav_links">Log out</a></li>
</ul>
</div>
</div>
This configuration functions properly on both Chrome and Firefox:
https://i.sstatic.net/Smf8j.png
To fix side margins for the versions you're using, you can add this CSS. However, use it judiciously:
.container-fluid > .navbar-header, .container > .navbar-collapse, .container-fluid > .navbar-collapse {
margin-right: 0px;
margin-left: 0px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
Regarding the top space issue, it's challenging to identify the specific property causing it. It could be related to incorrect code or properties like box-shadow.
Update: The bug causing space below the navbar has been identified. You need to specify the correct height for the navbar header. This adjustment worked for me:
.navbar-header {
height: 63px;
}