0

I am trying to create a responsive navbar with Bootstrap 5 with centered brand text and an icon with a dropdown menu which is not collapsed in the mobile view.

Here's my code so far:

https://www.codeply.com/p/95vE7k8i7W

The requirements are in the codeply but I'll add them here too:

  1. Center the Brand text in both expanded and collapsed view
  2. Person Icon on the right should always be visible in both expanded and collapsed view
  3. Person dropdown should appear under the icon. At the moment it appears on the left in expanded view and messes up the collapsed view
  4. Ideally I'd like to just do this in the html with Bootstrap classes, and not have to use hacky css!
Paul
  • 815
  • 1
  • 13
  • 23

1 Answers1

0

One question, do you want it to be centered in the page or centered between the elements. If you want it to be centered between the elements. You can wrap your button and login dropdown in a div (or another element), so that you have 3 children in your nav element. Then you can add the classes d-flex justify-content-between to the nav.

Ohh.. also remove the navbar-collapse from the navbarNavDropdown, and replace it with d-flex (d-block works too). It has flex-grow: 1 which makes it hard to for the other element to center because it takes up the space.

For your third question it can also be fixed by wrapping your navbar-toggler button and the dropdown menu div, in a div with a position-relative. Because the dropdown menu is positioned with absolute you can create another context for it with the position relative. So that it will position it self relative to the parent.

<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top d-flex ">
    <div class="collapse d-block" id="navbarNavDropdown">
        <ul class="navbar-nav me-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Menu One</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu Two</a>
                <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownMenuLink2">
                    <li><a class="dropdown-item" href="#">Sub 1</a></li>
                    <li><a class="dropdown-item" href="#">Sub 2</a></li>
                </ul>
            </li>
        </ul>
    </div>
    <a class="navbar-brand mx-auto d-block" href="#">Center This Brand</a>
    
    <div class="position-relative">
        <button class="navbar-toggler" 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="d-flex order-sm-1 ms-auto pe-2">
            <ul class="navbar-nav flex-row">
                <li class="nav-item mx-2">
                    <a href="#" data-bs-toggle="dropdown" class="nav-link dropdown-toggle" id="iconToggle">
                        <i class="fa fa-user fa-lg" ></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdownMenuLink2">
                        <li><a class="dropdown-item ms-auto" href="#">Login</a></li>
                        <li><a class="dropdown-item" href="#">Register</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
DharmanBot
  • 1,066
  • 2
  • 6
  • 10
Lasse Aakjær
  • 1
  • Thanks for getting back to me! Sorry I wasn't clear on the centering. I'd like the brand centered on the page, not between the elements. I'll try the other suggestions and see how I get on! – Paul Apr 02 '22 at 07:31
  • Hmmm I tried your code and it sort of works in that it centers the brand between the elements in expanded view. But all goes wrong in the collapsed xs view. See https://www.codeply.com/p/CIHiisr5pi – Paul Apr 02 '22 at 12:36
  • This is more like what I'm trying to achieve: https://www.codeply.com/p/3lCEpHygez But it's using some css with absolute positioning on the brand which feels bad. – Paul Apr 02 '22 at 12:57
  • @Dharman Are you sure you want to make these kind of edits with your bot and add it to the edit queue? – Passer By Apr 02 '22 at 16:28