1

I thought this was going to be easy, but 7 hours later, nope.

I'm trying to position my navbar-brand to the left, a blurb of text centered (always visible), and my navbar-collapse to the right.

The problem is the always visible centered text - everything I try forces the text onto a newline.

    <div class="navbar navbar-expand-lg justify-content-center">
        <div class="container">
            <a href="/" class="navbar-brand d-flex w-50 mr-auto">
                <h1>
                    <img src="/img/xxx.svg" width="36" height="36" alt="foobar">
                    Foobar
                </h1>
            </a>

            <need a container here to center this text>CENTERED BLURB OF TEXT</need>

            <button type="button" class="navbar-toggler bg-primary" data-toggle="collapse" data-target="#navbar-collapse">
                <span class="valign-image-text">
                    MENU
                    <img src="/img/menu-light.svg" width="30" height="30" alt="" class="ml-2">
                </span>
            </button>

            <div class="navbar-collapse collapse w-100" id="navbar-collapse">
                <!-- <ul class="navbar-nav w-100 justify-content-center"> -->
                    <!-- <li>This centered blurb of text collapses, not what I want</li> -->
                <!-- </ul> -->

                <ul class="navbar-nav w-100 ml-auto justify-content-end">
                    <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                    <li class="nav-item"><a class="btn btn-gray ml-0 ml-lg-4" href="#">Downloads</a></li>
                </ul>
            </div>
        </div>
    </div>

Don't post links to other Bootstrap 4 centering helper posts on SO, because they do not cover this.

Jeff
  • 5,962
  • 16
  • 49
  • 81
  • As the viewport gets narrower (mobile) the `button` is shown and the links disappear, so overlapping text will not be an issue. – Jeff Mar 06 '20 at 13:40

1 Answers1

0

Why not text-nowrap and then absolute center as explained here?

.abs-center-x {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

https://codeply.com/p/28xqoMNWGY

Notice that with the left margin on "Download" the centered text does overlap before the breakpoint.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • This works, and I appreciate it. I was hoping to avoid absolute positioning, but if that's the only way to make this happen with Bootstrap 4 navbars, I guess I'll have to bite the bullet. – Jeff Mar 06 '20 at 13:51