CODEWITHSUNDEEP
cssbootstrap-5
P.Davide
P.Davide

Reputation: 379

Bootstrap 5 navbar and fixed-top position

I am trying to use navbar with fixed-top class so that the menu will not pull down the element of the page when it is collapsed. But when I use the fixed-top class, the navbar will go over the container (in width) as if it was inside a container-fluid while i use a container class to have the menu and the site in the middle of the page (not a full width). Is there a way to have a navbar with fixed-top but not at full width?

This is the code:

<div class="container" style="border: 1px solid;">
        <nav class="navbar fixed-top navbar-expand-lg">
          <div class="container-fluid">
            <a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link" aria-current="page" href="n-index.php">Home</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Chi Siamo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Dove Siamo</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contatti</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
    </div> <!-- end container -->

Upvotes: 3

Views: 21992

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362320

When using position:fixed the element is removed from the normal DOM flow so it no longer relates to other page elements including its parent container.

If you want limit the navbar to the container width, use the container inside the navbar to wrap the navbar content...

<nav class="navbar fixed-top navbar-expand-lg">
    <div class="container">
        <a class="navbar-brand" href="#"><img src="n-img/logo.png" class="img-responsive"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="n-index.php">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Chi Siamo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Dove Siamo</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Contatti</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

https://codeply.com/p/AFQj4wf6DD

Upvotes: 7

Related Questions