CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-4
user3599852
user3599852

Reputation: 257

Trying to recreate a navBar using bootstrap 4

I know this should be easy but my brain feels broken at the moment. I'll probably kick myself when I find out how easy the solution is.

Basically I'm trying to recreate a NavBar like the one found on this website (https://www.sandcloudtowels.com/) using Bootstrap 4.

My goal is to have a full width fluid header container with a navBar inside that is NOT full width and sits nicely in the center. I also want the header to be fixed with a solid 1px border at the bottom for scrolling.

This is what I've managed to come up with: https://www.bootply.com/S4g9HGsy30

If I add the fluid class to the header tag then it makes everything full width, including the navBar inside. If I leave it how it is then the border at the bottom only goes the distance of the navBar and not the full width.

Any help? Cheers.

Upvotes: 0

Views: 137

Answers (1)

Duke
Duke

Reputation: 353

you are using class='container' in header as parent. Just remove container class in header and add another <div class='container'</div> insdie <nav> element.

         <header>
            <nav class="navbar  navbar-expand-lg navbar-light bg-light">
                <div class='container'>
                   <a class="navbar-brand" href="#">Navbar</a>
                   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                   </button>
                   <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                     <div class="navbar-nav">
                        <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                        <a class="nav-item nav-link" href="#">Features</a>
                        <a class="nav-item nav-link" href="#">Pricing</a>
                        <a class="nav-item nav-link disabled" href="#">Disabled</a>
                     </div>
                   </div>
                </div>
            </nav>
        </header>

Upvotes: 1

Related Questions