Question

I have menu items with varying length. I used a Bootstrap template (https://getbootstrap.com/docs/3.3/examples/navbar/) to initially have a top navbar which will be responsive and customized it a bit in order to try and get the design I was asked to do - for example I changed the "project name" for an image. The problem is I'm having a hard time aligning the menu items on the bottom of the UL, to match the image bottom.

I have this HTML (simplified):

$site_ids

with this CSS:

Collection

Actual:

foreach

What I need:

<div class="container">
    <nav class="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">
                    <img src="/img/logo.png">
                </a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul id="mainNavBar" class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">a fairly long item menu</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div><!--/.container -->

Thanks ahead.

Answer 1

Did you try using flex?

If I assumed this right, you have a menu within a container, that also has an image inside?

For example, this is your menu with it's container:

<AllowUnsafeBlocks>true</AllowUnsafeBlocks>

Add this CSS that will align it accordingly:

PropertyGroup

Edit: Updated JSfiddle

Vertical Align list item to bottom with a Bootstrap navigation bar

1 个答案: