CODEWITHSUNDEEP
htmlcssbootstrap-4
Dali
Dali

Reputation: 7882

Bootstrap 4.1 floating logo between

I have created a floating logo in Bootstrap 4 navigation, but unfortunately that breaks the "navbar-toggler button", this sould be right aligned on the right, but on small screens it comes under the logo on the right side...

Here the code that I have tried:

.navbar-brand {
  position: absolute;
  padding-top: 100px;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <a class="navbar-brand abs" href="#"><img src="assets/img/logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbar1">
            <ul class="navbar-nav text-right">
                <li class="nav-item active">
                    <a class="nav-link" href="#">lorem<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lorem</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Ipsum</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">lorem</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Upvotes: 0

Views: 256

Answers (1)

Yandy_Viera
Yandy_Viera

Reputation: 4380

When you se position: absolute to an element

The element is removed from the normal flow of the document, without creating any space for the element in the outline of the page. It is positioned relative to its closest positioned ancestor, if there is one; otherwise, it is located relative to the initial container block . His final position is determined by the values of top, right, bottom, and left. This value creates a new stacking context when the value of z-index is not auto. Absolutely positioned elements can have margin, and do not collapse with any other margin.

so when you set .navbar-brand {position: absolute;} it is removed the normal flow of the document and navbar-toggler is the 'only' child .container that has display: flex; and justify-content: space-between; (this is why navbar-toggler is on the right when you have other child inside .container).

to avoid the actual behavior you can do a lot of thing that depends on what are you expecting. try removing the position: absolute from the brand, adding more elements to the nav in order to get the toggle to the right, anyway the solution depends on what you want to achieve.

I hope I gave you an idea

Upvotes: 1

Related Questions