CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Peter Amo
Peter Amo

Reputation: 201

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

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:

enter image description here

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:

captur2

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?

Upvotes: 0

Views: 285

Answers (1)

Khalid Fazal
Khalid Fazal

Reputation: 393

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;):

Before

After(with width: max-content;):

After

.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.

Upvotes: 1

Related Questions