UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen.
I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. Despite finding numerous solutions online, none seem to work for my specific case.
Here is the default configuration:
Using mx-auto:
I want the Logo to remain in its current position, the links are fine as well, but the "Login" link should be aligned to the right edge of the screen. The closest I have come to achieving this effect was by using float-right. However, even then, the link was still around 150px away from the right edge without applying any margins.
.navbar {
width:100%;
background: none !important;
@media(max-width:34em) {
background: black !important;
}
.navbar-toggler {
cursor:pointer;
outline:0;
}
.nav-link {
text-transform:uppercase;
font-weight:bold;
}
.nav-item {
padding: 0 1rem;
@media(max-width: 34em) {
padding: 0;
}
.nav-link {
@media(max-width: 34em) {
font-weight:normal;
color:#fff !important;
}
}
}
}<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="hero">
<div class="container">
<div class="row">
<nav class="navbar navbar-toggleable-md navbar-inverse">
<a href="#" class="navbar-brand text-primary" id="logo">LOGO</a>
<a href="#" class="nav-item text-primary" id="login"></a>
<button class="navbar-toggler navbar-toggler-right" 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 justify-content-end" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK1</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK2</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK3</a>
</li>
<li class="nav-item">
<a class="nav-link text-primary" href="#">LINK4</a>
</li>
</ul>
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link text-primary" href="#">LOGIN</a>
</li>
</ul>
</div>
</nav>
</div>