Bootstrap navbar right alignment pushes items to the left

Question

EDIT: I have fixed the issue. Turns out, the navbar was not really 100% width and did not reach the edges of the screen.

I'm currently struggling with a bootstrap 4 navbar. I had the same problem using the previous version. There are a lot of solutions online but they just don't seem to work in my case.

Default configuration:

With mx-auto:

I would like the Logo to stay where it is, the links are fine too but the "Login" link should be on the right edge of the screen. The closest I got to the desired effect was by using float-right. Even then, the link would end up like 150px from the right edge with no margins applied.

.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>

score 0 · Answer 1 · answered Aug 12 '17 at 23:01

0

Well, with bootstrap, there's a navbar-right class. So on the part of the nav that you want to the right:

<ul class="nav navbar-nav mx-auto navbar-right">
    <li class="nav-item">
      <a class="nav-link text-primary" href="#">LOGIN</a>
    </li>
</ul>

Also, bootstrap 4 is in Alpha, majority of people use bootstrap 3 which is represented above. I'm not entirely certain what mx-auto is(never heard of it). But I do know that navbar-right would put that one link on the right.

answered Aug 12 '17 at 23:01

Amanda Zimmer

13
6

That's the problem i had before. It "sort of" worked. What i mean, it did put the link on the right, but not on the edge. In fact, it was very far from it as described above. – Blockrock Aug 12 '17 at 23:23

Bootstrap navbar right alignment pushes items to the left

1 Answers1