Truly centering the menu in Navbar?

[SamuelMiller]

I am trying to create a navbar with the brand-name aligned left, menu items centred and possibly, eventually, another item, such as search input, right-aligned.

The examples I looked at online use "justify-content-center" (see after button tag below) on the menu items to center them. But, the result is not truly centred. The "centred" menu is a little off to the right because it is affected by the width of the brand name/logo content on the left. To make the menu truly centred, I removed the brand name/log from the flow with "position-absolute". However, this makes the Navbar less responsive as now the menu overlaps with the brand name when the viewport shrinks as the menu div now ignores the brand-name/logo content.

What would be recommended to TRULY center the menu while preventing it from overlapping with the brand name/logo when the viewport shrinks--before I remove the brand name with d-none (see below) for mobile viewports?

 <nav id="navbar" class="navbar navbar-expand navbar-dark" data-toggle="affix">
                <div class="container-fluid">
                    <a class="navbar-brand position-absolute" href="#section-1">
                        <img src="assets/img/logo-sds-notext.gif" width="40" height="40" alt="Home" title=""
                            class="d-inline-block">
                         <span class="d-none d-sm-inline navbar-name">
                            Samba du Soleil
                        </span>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="#section-1">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#section-2">Band</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#section-3">Music</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#section-4">Events</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="#section-5" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"
                                    role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    More
                                </a>
                                <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end dropdown-menu-lg-start"
                                    aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="#">Scores</a></li>
                                    <li><a class="dropdown-item" href="#">Contact</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

[SamuelMiller]

I found this excellent tutorial, which uses using display : grid instead of display : flex to center. (https://chrisbracco.com/css-truly-center-a-single-child-element-horizontally-when-siblings-are-present/).

The author explains the central issue, "The “centered” child element is only horizontally centered within the remaining space in the parent element, and not the “true center” of the parent element. In this case the width of the centered element is equal to the width of the parent element minus any sibling element(s). The centered element can only be “truly centered” if the width of child elements on both the left and right of it are equal."

The tutorial solution boils down to this:

<style>
    .truly-center-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .truly-center-grid .truly-center-child:last-child {
        text-align: right;
    }
</style>
<div class="truly-center-grid">
    <div class="truly-center-child">
        <button type="button">×</button>
    </div>
    <div class="truly-center-child"><span>Center</span></div>
    <div class="truly-center-child">
        <button type="button">×</button>
    </div>
</div>

The "solution" applied to my nav looks like the following below. Hopefully overriding display: flex in container-fluid, or any other navbar class I've used, with display: grid won't cause any issues. I haven't found any yet. BTW, I recommend that Boostrap provide a way to truly centring navbar components without the user having to add custom CSS. Please let me know if there is an easy way to do this with the current Bootstrap classes. I added the truly-center-grid to the container-fluid div. I didn't bother adding truly-center-child to the name-brand <a> link or the navbar-nav <ul> for the menu since specifying grid-template-columns: 1fr auto 1fr in the truly-center-grid class already places these components accordingly. At a later date, if I want a right-align search box, I can just add the bootstrap "text-end" class to the search form element/div.

CSS

.truly-center-grid {
	display: grid !important;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
}

HTML

 <nav id="navbar" class="navbar navbar-expand navbar-dark" data-toggle="affix">
                <div class="container-fluid truly-center-grid">
                    <a class="navbar-brand truly-center-child" href="#section-1">
                        <img src="assets/img/logo-sds-notext.gif" width="40" height="40" alt="Home" title=""
                            class="d-inline-block">
                      <span class="d-none d-sm-inline navbar-name">
                            Samba du Soleil
                        </span>
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
                        aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNavDropdown">
                        <ul class="navbar-nav truly-center-child">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="#section-1">Home</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#section-2">Band</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#section-3">Music</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#section-4">Events</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a href="#section-5" class="nav-link dropdown-toggle" id="navbarDropdownMenuLink"
                                    role="button" data-bs-toggle="dropdown" aria-expanded="false">
                                    More
                                </a>
                                <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end dropdown-menu-lg-start"
                                    aria-labelledby="navbarDropdownMenuLink">
                                    <li><a class="dropdown-item" href="#">Scores</a></li>
                                    <li><a class="dropdown-item" href="#">Contact</a></li>
                                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

[mdo]

Posting this as a suggestion with our grid and utilities: #36523.

[SamuelMiller]

[SamuelMiller]

Thanks for providing an example.

I am finding the specifying the cols hacky when trying to only collapse everything but the nav-brand. To get the menu to the center, I had to set up the columns of navbar-brand, navbar-nav, and button div so they don't add up to 12).

<nav class="navbar navbar-expand-lg bg-light" aria-label="Twelfth navbar example">
      <div class="container-fluid">
          <a class="navbar-brand col-lg-3 me-0" href="#">Centered nav</a>
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11"
              aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse d-lg-flex" id="navbarsExample11">
              <ul class="navbar-nav col-lg-8 justify-content-lg-center">
                  <li class="nav-item">
                      <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                  </li>
                  <li class="nav-item">
                      <a class="nav-link disabled">Disabled</a>
                  </li>
                  <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown"
                          aria-expanded="false">Dropdown</a>
                      <ul class="dropdown-menu">
                          <li><a class="dropdown-item" href="#">Action</a></li>
                          <li><a class="dropdown-item" href="#">Another action</a></li>
                          <li><a class="dropdown-item" href="#">Something else here</a></li>
                      </ul>
              </ul>
              <div class="d-lg-flex col-lg-4 justify-content-lg-end">
                  <button class="btn btn-primary">Button</button>
              </div>
          </div>
      </div>
  </nav>

[SamuelMiller]

Looking more around the internet for flex box approaches for displaying left/true-center/right-align items in the same row, I came across this simple approach: https://stackoverflow.com/questions/32378953/keep-the-middle-item-centered-when-side-items-have-different-widths
Codepen implementation: https://codepen.io/sam-miller-the-flexboxer/pen/OJQoGGq)

HTML version (The centerline class adds a central divider to check the alignment of the center div):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Left, Center, Right align Navbar</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <style>
        .centerline {
            position: fixed;
            top: 0;
            left: 50%;
            width: 10px;
            height: 100%;
            background: red;
            transform: translateX(-50%);
            opacity: 0.5;
            z-index: 1
        }
        .parent {
            display: flex;
            justify-content: space-between;
        }
        .left,
        .right {
            background-color: red;
            flex: 1;
            /* flex-grow: 1;
            flex-basis: 0; */
            overflow: auto
        }
        .right {
            text-align: right;
        }
        .center {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="centerline"></div>
    <div class="parent">
        <div class="left">
            short text.
        </div>
        <div class="center">
            I'm in the center.
        </div>
        <div class="right">
            Very loooooooo test.
        </div>
    </div>
    
    <h4 class="text-center my-2">Using Only Bootstrap</h4>
    <div class="d-flex justify-content-center">
        <div class="col bg-danger overflow-auto">
            short text.
        </div>
        <div class="bg-success">
            I'm in the center.
        </div>
        <div class="col bg-danger overflow-auto text-end">
            Very loooooooo test.
        </div>
</body>

</html>

I'll likely update this thread with the above approach applied to the navbar.

[SamuelMiller]

Here is the alternative flex-1 approach for a truly centered navbar I discussed in my previous post applied to a Bootstrap navbar. This approach does not require specifying specific col spans. However, due to the limitation of navbar-collapse for the toggler requiring its own div, I am not able to avoid collapsing the Navbar brand with everything else. Again, I've included a fixed red center line div to see that the navbar menu remains center.
CodePen: https://codepen.io/sam-miller-the-flexboxer/pen/bGLmXzz

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Left, Center, Right align Navbar</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
        crossorigin="anonymous"></script>
    <style>
        .centerline {
            position: fixed;
            top: 0;
            left: 50%;
            width: 5px;
            height: 100%;
            background: red;
            transform: translateX(-50%);
            opacity: 0.5;
            z-index: 1
        }
    </style>
</head>

<body>
    <div class="centerline"></div>
    <nav class="navbar navbar-expand-sm bg-light">
         <div class="container-xxl">
            <button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarTogglerflex-1" aria-controls="navbarTogglerflex-1" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse align-items-baseline" id="navbarTogglerflex-1">
                <div class="col">
                    <a class="navbar-brand" href="#">
                        <i class="bi bi-bootstrap-fill h2 align-middle"></i>
                        Bootstrap
                    </a>
                </div>
                <ul class="navbar-nav mb-2 mb-sm-0">
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled">Disabled</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            Dropdown link
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><a class="dropdown-item" href="#">Action</a></li>
                            <li><a class="dropdown-item" href="#">Another action</a></li>
                            <li><a class="dropdown-item" href="#">Something else here</a></li>
                        </ul>
                    </li>
                </ul>
                <div class="col">
                    <form class="ms-sm-auto w-75 " role="search">
                        <div class="input-group input-group-sm mb-3 flex-nowrap">
                            <input type="text" class="form-control" placeholder="Search">
                            <button type="button" class="btn btn-secondary">
                                <i class="bi bi-search"></i>
                                <span class="visually-hidden">Search</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </nav>
</body>
</html>

[SamuelMiller]

I just noticed that the bootstrap website itself has a well-designed responsive three-section navbar with what looks like a truly centered search box (https://getbootstrap.com/docs/5.2/). I'll be examining it in detail to learn from it. I like how it collapses down. I suggest that Bootstrap include a simplified version of it as an example in the documentation. With so many scripts and styles going on, I am having difficulty replicating the website's navbar locally. It does look like it is using grid display as well for layout?