CSS - how to vertical align split navbar (left and right-floating icons) AND mixed block / inline items

Question

This is similar to other questions posted, but a bit more specific.

My goal is to create a split navbar using CSS (pure or using bootstrap), with login and signup buttons aligned to the right and other buttons to the left. On XL screens, I have the login and signup buttons change from inline-block to block display, which makes them take up two lines each. Each consists of a font awesome icon and text. With this simple change, I'm having a lot of trouble with vertically aligning the other buttons. The block buttons are centered vertically in the navbar, but the others are too high.

All flexbox-based solutions have had the side effect of removing the right-alignment of the login and signup buttons. This includes any bootstrap classes like d-flex, adding any align properties to the css file..

I could redesign the navbar to have the right-aligned items in a secondary navbar as in the solution here: bootstrap navbar floating left and right but I am pretty curious about solving / understanding this issue (and being able to implement this in the simplest way possible).

Here's how I have the html structure:

  <div class="container-fluid">
    <div class="row no-gutters flex-row">
            <ul class="">
                <li class=""> <a href="#">Map</a></li>
                ...
                <li class="dropdown">
                    ...
                </li>
                <li class="nav navbar-right " id="signup-btn">
                    <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span></a>
                </li>
                <li class="nav navbar-right " id="login-btn">
                    <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span></a>
                </li>
            </ul>
    </div>
</div>

Custom CSS for these elements:

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  text-align: center;
  padding: .9rem .9rem;
}

#login-btn{
  float: right; !important;
}

#signup-btn {
  float: right; !important;
}

#navbar li {
  vertical-align: center;
}

What this looks like:

If I try some of the flex solutions posted eg, here Bootstrap NavBar with left, center or right aligned items, can't split the navbar any more:

Please post an image of how you expect it to look. Also you're not actually using the [navbar](https://getbootstrap.com/docs/4.4/components/navbar/) — Carol Skelly, Feb 08 '20 at 12:24
You could try to add "margin-left: auto" or "margin-right: auto" to the first element of the elements you want to move right or left respectively. The adjacent elements will simply follow. Works for me most of the time with FBL (and without!). Up and down likewise with margin-top/margin-bottom... — Rene van der Lende, Feb 08 '20 at 15:31
@Zim it should look like the top but with the left elements aligned vertically. I'm not using responsive collapsing or color scheme classes, so unless I missed another requirement, using the nav tags is optional right now. — tripolon, Feb 09 '20 at 05:33

score 0 · Answer 1 · answered Feb 08 '20 at 09:48

0

use "text-right" class for container div - in bootstrap

answered Feb 08 '20 at 09:48

Amin Azimi

659
9
25

Carol Skelly · Answer 2 · 2020-02-08T15:05:04.940

The other question does provide the guidance needed to achieve left and right Navbar items with text & icons.

Just use 2 navbar-nav's and justify-content-between...

<nav class="navbar navbar-dark navbar-expand justify-content-between">
    <div class="container-fluid">
        <ul class="navbar-nav">
            <li class="nav-item text-center">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-map"></span><span class="d-none d-sm-inline d-xl-block px-1">Map</span></a>
            </li>
            <li class="nav-item dropdown text-center">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fa fa-list"></span><span class="d-xl-block d-none"></span><span class="d-none d-sm-inline px-1">Dropdown</span> </a>
                ...
            </li>
        </ul>
        <ul class="nav navbar-nav ml-auto">
            <li class="nav-item text-center" id="signup-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block px-1">Sign Up</span></a>
            </li>
            <li class="nav-item text-center" id="login-btn">
                <a href="#" class="nav-link" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block px-1">Log In</span></a>
            </li>
        </ul>
    </div>
</nav>

https://codeply.com/go/kTGlK9Axdk/left-right

score 0 · Answer 3 · answered Feb 08 '20 at 12:52

0

If I correctly understood your task you can do like this:

Split nav into 2 blocks and move them with

.nav { justify-content: space-between; }
Set blocks' height equal 100% of the parent
Use 'align-items: center' inside of them

.nav__list, .nav__buttons { height: 100%; display: flex; align-items: center; }

I've created pen. I think it'll help you. https://codepen.io/dimaaan21/pen/WNvbEvM

answered Feb 08 '20 at 12:52

dimaaan_21

1

This example codepen has all the elements that I'm trying to combine. However, it doesn't work out if I follow your steps. It ended up making the log in and sign up buttons on a second row below the list, no matter the width of the navbar. – tripolon Feb 09 '20 at 07:12
For detailed solve you need to update your answer code with all elements. I showed the pen for example only. – dimaaan_21 Feb 09 '20 at 09:02

score -1 · Answer 4 · answered Feb 08 '20 at 09:53

this is a bad way to solve the problem. It's better to use flexbox instead of float.

for example:

<div class="parent-box">
    <div>
        <a href="#">Map</a>
        ...
    </div>
    <div>
        <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-user"></span><span class="d-none d-sm-inline d-xl-block">Sign Up</span></a>
        <a href="#" data-toggle="modal" data-target="#"><span class="fa fa-sign-in"></span><span class="d-none d-sm-inline d-xl-block" >Log In</span></a>
    </div>
</div>

.parent-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

CSS - how to vertical align split navbar (left and right-floating icons) AND mixed block / inline items

4 Answers4