0

I am trying to centre the logo on the navbar but it always sticks more to the left. Are there any ways to fix this issue with bootstrap classes?

The navbar includes a dropdown toggle button on the left, the logo in the centre, and two buttons (sign in and create account) on the right. I have tried various attempts with margin-left, mx-auto, and absolute positioning but none worked and I need a solution that will work when the screen is collapsed as well.

HTML

<div class="pos-f-t">
    <div id="outter" style="width:100%">
        <nav id="mainnavbar" class="navbar sticky-top navbar-dark bg-dark">
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h3 id="logo">Logo</h3>
          <form class="form-inline my-2 my-lg-0">
            <b-link to="/login"><b-button id="login" class="navbarbutton" variant="outline-success">Log In</b-button></b-link>
            <b-link to="/create"><b-button class="navbarbutton" variant="outline-success">Create Account</b-button></b-link>
          </form>
        </nav>
    </div>
<!--...#navbarToggleExternalContent-->
</div><!--end pos-f-t-->

CSS

#logo{
 /* margin-left: 10%;*/
  margin-bottom: 0;
  padding-bottom: 3px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#login{
  margin-right: 10px;
}

I expected every element to be equally spaced out on a wide display and when collapsed as well. Instead, the elements rearrange themselves when the display is narrow and the logo remains slightly to the left. I am also trying to avoid the absolute positioning solution as there will be overlapping on a narrow display.

Noam Suissa
  • 428
  • 4
  • 23

3 Answers3

0

You could always use padding-left or padding-right and play around with that. What i always like to do is use position:absolute and from that, i can use codes top: "number" "px" right; left: you will just have to play around with number until you get it right. I am also a new learner so can't tell you much.

Stuntman 82
  • 15
  • 5
  • Tried this solution already. Absolute positioning will fix the problem as long as the screen stays the same width. Once I collapse it, it will eventually overlap other elements on the navbar – Noam Suissa Jan 14 '19 at 00:43
0

Because of flexbox the element in the middle will shift to the left if there is not enough space because of the rightmost element.

To center your element you can still use position: absolute and position: relative on the parent, like in the snippet below.

Use this with caution, since the elements will just overlap if the width of the window is too small.

#logo {
  /* margin-left: 10%;*/
  margin-bottom: 0;
  padding-bottom: 3px;
  color: white;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

#login {
  margin-right: 10px;
}

nav {
  position: relative;
}

nav h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="pos-f-t">
  <div id="outter" style="width:100%">
    <nav id="mainnavbar" class="navbar sticky-top navbar-dark bg-dark">
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <h3 id="logo">Logo</h3>
      <form class="form-inline my-2 my-lg-0">
        <b-link to="/login">
          <b-button id="login" class="navbarbutton" variant="outline-success">Log In</b-button>
        </b-link>
        <b-link to="/create">
          <b-button class="navbarbutton" variant="outline-success">Create Account</b-button>
        </b-link>
      </form>
    </nav>
  </div>
  <!--...#navbarToggleExternalContent-->
</div>
<!--end pos-f-t-->
jcal
  • 871
  • 5
  • 14
  • Helpful, but I am trying to avoid this solution and looking for a more dynamic approach using bootstrap4. Like you mentioned, the smallest size display will result in the logo overlapping the buttons on the right which is not desired. – Noam Suissa Jan 14 '19 at 00:58
  • these sort of problems always occur if there is not enough space for the elements. Normally you would use [media queries](https://www.w3schools.com/css/css3_mediaqueries_ex.asp) to handle this. So you can display the elements differently on different view sizes – jcal Jan 14 '19 at 01:02
0

you can try wrapping the hamburger, the logo, and the buttons in their own divs.

<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  </head>


  <body>
    <nav class="navbar sticky-top navbar-dark bg-dark">
      <div class="col-md-4 col-sm-4">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>

      <div class="col-md-4 col-sm-4 text-center">
        <h3>Logo</h3>
      </div>

      <div class="col-md-4 col-sm-4">
        <form class="text-right">
          <a class="btn btn-primary">Login</a>
          <a class="btn btn-primary">Create</a>
        </form>
      </div>
    </nav>
  </body>
</html>

Edit: You can add col-md-4 or col-lg-4 or col-whateverScreenSize-4 to each div...

Rupert Raphael Amodia
  • 111
  • 1
  • 6