CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Keegan Fargher
Keegan Fargher

Reputation: 3

Navbar-toggler messing up navbar-brand alignment

I am using Bootstrap 4 and I want my navbar-toggler to come before navbar-brand such as this, but my alignment keeps getting messed up if I put the navbar-toggler first. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand">
    <h1>????</h1>
  </a>
</nav>

JSFiddle.

Thank you

Upvotes: 0

Views: 68

Answers (3)

Odisleysi Mart&#237;nez Furones
Odisleysi Mart&#237;nez Furones

Reputation: 109

You could try this in a style.css:

@media (max-width: 991px) {
    .navbar-brand{    
        position: absolute;
        margin-left: 68px;
    }
}

Upvotes: 0

Ashish Yadav
Ashish Yadav

Reputation: 2008

In bootstrap 4, you can add margin / padding classes to provide auto margins or paddings.

From the screenshot, I think you want your button and nav brand both in left side. There is bootstrap class "mr-auto" which is used to push items to the right and the element with this class will be aligned to the left.

<a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>

This should do the trick.

-- FULL CODE --

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

Upvotes: 0

Lucas Sedrez
Lucas Sedrez

Reputation: 36

Just apply the class .mr-auto after .navbar-brand.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar">
  <button class="navbar-toggler navbar-light" type="button" aria-expanded="True">
        <span class="navbar-toggler-icon"></span>
    </button>
  <a class="navbar-brand mr-auto">
    <h1>????</h1>
  </a>
</nav>

Check out the .mr-auto class: https://getbootstrap.com/docs/4.0/utilities/flex/

Hope this helps :)

Upvotes: 1

Related Questions