0

Im trying to center the items in my navbar but no matter what i do the items are glued to the left. At one point I could get all of them to move a half inch to the right or left by switching between ml-auto, mx-auto and mr-auto. Now nothing moves even when i do that. Im not sure what i did.

Ive already tried several code examples from other posts but none of them work. Im relatively new to code so im not sure whats breaking.

iv'e tried adding d-flex justify-content-center to navbar-collapse, justifying content to center in the div "collapse navbar-collapse" and a few other things suggested in other posts. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="img/logo3.png" style="width:13%;" ;></a>

    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
       <span class="navbar-toggler-icon"></span>
             </button>
    <div class="collapse navbar-collapse d-flex justify-content-center" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

To my knowledge, my CSS has nothing targeting the Nav at the moment.

I just want the nav items in the middle of the navbar.

Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252
jay777
  • 125
  • 12

2 Answers2

1

Remove the ml-auto CSS class from the ul tag.

Add this in CSS

.navbar-brand {
   position: absolute !important;
}
nitin9nair
  • 580
  • 3
  • 12
  • [codepen working demo](https://codepen.io/nitinnairdev/pen/jjZVLG?editors=1000) – nitin9nair Jun 30 '19 at 04:43
  • thanks for responding. Removing ml-auto moved everything an inch to the left towards the center but its still on the very left of the page. – jay777 Jun 30 '19 at 06:25
  • Instead of `ml-auto` try `mx-auto` – nitin9nair Jun 30 '19 at 06:27
  • Unfortunately nothing changed.. – jay777 Jun 30 '19 at 06:35
  • Did you checked the codepen demo I have added in earlier comment – nitin9nair Jun 30 '19 at 06:36
  • Can you add a screenshot on how the navbar is displaying in your project? – nitin9nair Jun 30 '19 at 06:40
  • sorry about that, i didn't notice the demo, still getting used to the site. so I checked and your suggestion actually did work but only when i took out the image of my logo. its centered now but i need to have my logo in the left corner. – jay777 Jun 30 '19 at 06:54
  • Hey is your issue fixed? – nitin9nair Jun 30 '19 at 07:04
  • no, I still need to figure out how to keep the items centerd with the logo in the corner. – jay777 Jun 30 '19 at 07:10
  • I am working on it. This issue occurs as the nav-bar menu item position depends on the width of your logo. Good question btw. – nitin9nair Jun 30 '19 at 07:12
  • oh ok cool. Thanks, I appreciate the help. If it helps, the original image is 900px X 900px but i set the width to 14% inside the img tag using style. – jay777 Jun 30 '19 at 07:17
  • Check my answer now. I have added the fix for this issue. Here the [codepen working demo](https://codepen.io/nitinnairdev/pen/jjZVLG?editors=1100) for it. – nitin9nair Jun 30 '19 at 07:17
  • Now, the fix will work even if you give any width to the logo. The nav items will always be in `center` – nitin9nair Jun 30 '19 at 07:18
  • Your code works with the Hello world but my logo still pushes everything to the right when i add the link. Could it be the size? also the nav items are slightly off center... again, i appreciate the help. i will add a screenshot. – jay777 Jun 30 '19 at 07:33
  • sorry theres no way for me to add a screenshot.. – jay777 Jun 30 '19 at 07:49
  • Try to make the logo image smaller rather than using a image of 900px X 900px and manipulating its width with CSS. Does the solution work is you add any other image – nitin9nair Jun 30 '19 at 07:54
  • I made the image small and the nav items are much more centered now but its still just right of center. I just need to move it like 3 inches to the left. – jay777 Jun 30 '19 at 08:04
  • did you added `.navbar-brand { position: absolute !important; }` in CSS – nitin9nair Jun 30 '19 at 08:06
  • yah i did but nothing changes. My logo is now 150x150 px – jay777 Jun 30 '19 at 08:13
  • For the CSS to work, it must be below the bootstrap CSS link you have added in `index.html` file. – nitin9nair Jun 30 '19 at 08:18
  • ok so that worked to make everything in the position it needs to be but now the logo goes outside the navbar. The navbar seems like it fits itself to only the items themselves while The logo bleeds over the edge onto the page. – jay777 Jun 30 '19 at 18:26
0

This worked for me: <div class="collapse navbar-collapse d-flex" id="navbarResponsive"> and <ul class="navbar-nav mx-auto">.

/* Nesessary for the logi i use
    You might not need it
*/
.navbar-brand img {
  width: 64px;
  height: auto;
}

/* To keep the nav items
* centered and full width
* on mobile phones
*/

@media (max-width: 575px) {  
 .navbar-nav {
    width: 100%;
  }
  .navbar-nav li {
    text-align: center;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">


<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#"><img src="https://i.stack.imgur.com/SENHZ.png" ;></a>

    <button class="navbar-toggler" type="button" data- toggle="collapse" data-target="#navbarResponsive">
       <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse d-flex" id="navbarResponsive">
      <ul class="navbar-nav mx-auto">
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
Razvan Zamfir
  • 4,209
  • 6
  • 38
  • 252