How to determine nav-items to get full required width automatically

Issue

I'm working with Bootstrap 3 and I'm trying to make a header navbar. Here is my code:

<div class="has-navbar">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button class="navbar-toggler custom-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 bg-warning first-item m-1">
                    <a class="nav-link" href="#"><i class="fa fa-home"></i> Home</a>
                </li>
                <li class="nav-item bg-warning m-1">
                    <a class="nav-link" href="#"> <i class="fa fa-graduation-cap"></i>Courses</a>
                </li>
                <li class="nav-item bg-warning m-1">
                    <a class="nav-link" href="#"><i class="fa fa-shopping-cart"></i> E-learning products</a>
                </li>
                <li class="nav-item bg-warning m-1">
                    <a class="nav-link" href="#"><i class="fa fa-newspaper"></i> Articles</a>
                </li>
                <li class="nav-item bg-warning m-1">
                    <a class="nav-link" href="#"><i class="fa fa-calendar"></i> Events</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

And the result looks like this:

As you can see the menu nav-item E-learning Products does not have enough space to place correctly in the place of nav-item.

However the other nav-items has extra space (as I mentioned out in the image).

So I need to make sure that every nav-item has enough required space based on the length of <a> links of nav-items.

And here comes the CSS code of this navbar:

/* Navbar */

        .has-navbar{
            margin-top:-10px;
            width:100%;
            height:30px;
        }

        .navbar{
            background-color: #fff !important;
            height:100%;
        }

        .nav-item{
            height:30px;
            width:130px !important;
        }

        .nav-item a{
            font-size:13px;
            font-weight: bold;
        }

        .first-item{
            margin-right:-50px !important;
        }

So here I tried setting width:130px !important; for .nav-item and it didn't work out well. I also tried width:100%; and this is the result:

So how can I properly place each nav-item menu link properly in their required space so the menu links does NOT have extra space AND not enough space?

Solution

So what you can do is set its width to max-content, which will be the maximum width that the content contained within can be.

Before(with width: 130px !important;):

After(with width: max-content;):

.nav-item{
   height:30px;
   //width:130px !important;
   width: max-content;
}

Note: If you think it's too short, you could set a min-width value to whatever you like.

Answered By - Khalid Fazal