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


I’m sorry for my question is may be duplicated to this:
Bootstrap fixed navbar inside div or this:
Twitter Bootstrap: How to make top fixed navbar stay in container and not stretch?
or many similiar, but three years has passed, and Bootstrap has almost updated it’s version from 2-nd to 4-th but problems remains still the same.
So I’m looking for some elegant and simple way to make fixed navbar stay inside parents div.container.
Here’s the code, that I’ve 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">
        <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
            <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>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>


Thank you for all your answers, but I’ve found at last an answer here: Fixed position but relative to container
This custom CSS is really helpful:

.container {
padding: 0px;

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

Answered By – Taras Yaremkiv

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.