Twitter Bootstrap Question posted in

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

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">
        </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>
Tags:

6

Answers


  1. Chosen as BEST ANSWER
    0

    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%);  
}

  2. 0

    Edit – I mistakenly gave a Booststrap 3 answer instead of Boostrap 4.

    <nav class="navbar navbar-fixed-top navbar-light bg-faded">
    <div class="container">
        <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="favicon1.png" 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>
    </div>
</nav>
<div class="container">
    <div class="next">Head</div>
</div>

    You want to put the “container” div inside your nav.

    Login or Signup to reply.
  3. 0

    This was a little bit tricky.

    In addition to placing the <div class="container"></div> inside nav.navbar, I had to use the following CSS so that the toggler and the logo didn’t overlap on mobile:

      @media (max-width: 767px) {
    .navbar .container {
      width: 100%;
    }
  }

    My navbar code looks like this (generic):

    <nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  <div class="container">
    <div class="navbar-header">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

      <a class="navbar-brand" href="{{ home_url('/') }}">
        <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> SITENAME
      </a>
    </div>
    <div class="collapse navbar-collapse " id="navbarSupportedContent">
      <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>
  </div>
</nav>

    My navbar code looks like this (for wordpress):

    <nav class="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
    <div class="container">
      <div class="navbar-header">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
                data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <a class="navbar-brand" href="{{ home_url('/') }}">
          <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
          {{ get_bloginfo('name', 'display') }}
        </a>
      </div>

      <div class="collapse navbar-collapse " id="navbarSupportedContent">

        @if (has_nav_menu('primary_navigation'))
          {!! wp_nav_menu(['theme_location' => 'primary_navigation', 'walker' => new wp_bootstrap_navwalker(), 'menu_class' => 'nav navbar-nav mr-auto']) !!}
        @endif
      </div>
    </div>
  </nav>

    JSFIDDLE

    Login or Signup to reply.
  4. 0

    I have found the simplest solution is to remove the .navbar-fixed-top class from the <nav> element and apply it to the <div class="container"> that wraps your <nav>. This solution does not require any custom CSS and works across devices.

    <div class="container fixed-top">
    <nav class="navbar navbar-light bg-faded">
    Login or Signup to reply.
  5. 0 
    /*ur custom css*/
.container-fluid{
    background-color: black;
}
    <div class="container-fluid">
  <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark ">
    <div class="container">
      <a class="navbar-brand inline-flex items-center" href="{{ home_url('/') }}">
          <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
          {{ get_bloginfo('name', 'display') }}
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav ml-auto">
          <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>
    </div>
  </nav>
</div>
    Login or Signup to reply.
  6. 0

    If you want the nav in the body, put the nav in container div and add sticky-top class to the container. Do not apply sticky-top to the nav element.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search