How to center navbar items? (responsively)

Question

Tried many things but nothing workd. Hope you guys can help me out. My navbar looks like this:

 .navbar-nav{ float: left; } .navbar img{ width: 35px; } #navi{ position: fixed; width: 100%; z-index:1; } .navbar a{ font-size: 25px; } .navbar{ background-color: #000000; } .halter{ padding: 5px; } .navbar-toggler{ } .navbar-brand{ margin-left: 12px; font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif"; }

 <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> <a data-scrol class="navbar-brand" href="#text1"> <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li> </ul> </div> </nav>

I want the li elements in my ul to be responsively centered in the middle of the navbar. Coudn't figure out the solution.

Thanks in advance.

Answer 1

You need to add this css:

#navbarNav{justify-content:center;}

How would you figure that out for yourself?

1. Understand that bootstrap provides all classes and css for you, but it is designed to be overridden where needed

2. In Chrome browser:

   a. Right-click on the area that doesn't look right.

   b.Choose INSPECT from the pop-up context menu

   c. Maximize the DevTools panel. On the left side is the HTML that makes up the page; on the right side is the CSS for the element currently highlighted on the left side. Experiment away!

 /* You need this at FULL SCREEN to see the effect (top right link) The fix is: .navbar-nav{justify-content:center;} */

 .navbar-nav{} .navbar img{width:35px;} #navi{position:fixed;width:100%;z-index:1;} .navbar a{font-size:25px;} .navbar{background-color:#000000;} .halter{padding:5px;} .navbar-toggler{} .navbar-brand{margin-left:12px;font-family:Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";} /* ADD THIS */ #navbarNav{justify-content:center;}

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-lg navbar navbar-light" style="background-color: #FFFFFF"> <img src="WildfireGraphic1.png" class="rounded float-left" alt="icon1"> <a data-scrol class="navbar-brand" href="#text1"> <span class="prwaldbrand">Projekt&nbsp; <span class="secondword">Waldbrand</span></span> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home<span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Film</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Info</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Über uns</a> </li> </ul> </div> </nav>

Answer 2

you need to apply the css in the ul and in the li

.navbar-nav{
    float: left;
}
.navbar-nav ul {
    float: left;
}
.navbar-nav ul li{
    float: left;
}