Bootstrap 4: How to make top fixed navbar stay in container and not stretch?

Hey, I’m looking for some elegant and simple way to make fixed navbar stay inside parents div.container.
Here’s the code, that I copied and changed a little bit from official documentation:

<div class="container">
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" 
        data-target="#navbarResponsive" aria-controls="navbarResponsive" 
        aria-expanded="false" aria-label="Toggle navigation">
    </button>
    <div class="collapse navbar-toggleable-md" id="navbarResponsive">
        <a class="navbar-brand" href="#">
            <img src="" width="30" height="30" class="d-inline-block align-top" alt="">Navbar
        </a>
        <ul class="nav navbar-nav float-md-right">
            <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="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>
</div> 

By the way if you know the answer, you can post it on Stackoverflow to earn some points)

Do you have a pen I can play with ?

Have you tried having <div class="container"> inside your nav and not outside?

Have you also used really specific CSS selectors to style your navbar ? (when you look in the Inspector, what do you see?)


there it is.

Hi, like I said, did you try with more specific selectors?

this one works .navbar-fixed-top { width: your width (or your margin, whatever)}

Also your <div class="container" tags are not placed correctly.

Hey timotheap.
Yes I forgot to put a closing tag in the codepen example, but it doesn’t matter because browser put it for me. Anyway, I’ll what I try to explain what I mean:
http://v4-alpha.getbootstrap.com/components/navbar/#collapsible-content - I copied the html code from here, because I wanted my page to show navigation only when content is meant to be shown.
Then, I’ve read in the http://v4-alpha.getbootstrap.com/components/navbar/ => [Basics], that =>
" Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width."
So that’s what I 've done therefore my navbar was inside container, but after I added navbar-fixed-top class to nav tag, it spread to whole width of the body.

But…I’ve had another look at your Codepen, you’ve managed to size your navbar, no?

No a still haven’t done it yet.

you can wrap a navbar in a .container to center it on a page or add one within to only center the contents of a fixed or static top navbar.

-That’s what is written in bootstrap 4 documentation. So I thought a custom css is not compulsory to fix it.

I thinkThat’s what I see in jssFiddle after having pasted your code:


And

i get it, your example use bootstrap 3 - not 4

Well it doesn’t change anything. It stretches to full width of a body.
This cutom css helps:

.container {
padding: 0px;
}

nav.navbar {
width: inherit;
left: 50%;
transform: translateX(-50%);
}