Question

I’m basing a website on the Initializr bootstrap template. Instead of “Project name” in the upper left corner, I’m using an image. The navigation links are still align to the top of the page, but I would like them at the bottom of the black navigation bar:

To reproduce the easiest is to download the Bootstrap template, and change the ‘Project name’ in the navbar to:

<a class="brand" href="#"><img src="apple-touch-icon-114x114-precomposed.png" /></a>

I cannot for the life of me get the links to align at the bottom of the navbar, unless by setting the .navbar .nav style in bootstrap.css (of .min.css) with a top margin of about 90px. This (pixel-based) solution feels like a wrong approach however.

I’ve tried playing around with position: relative; bottom: 0 and vertical-align: bottom but to no avail. The amount of CSS in these templates doesn’t help either (especially for a-developer-not-a-designer like me).

Can anyone get the links to neatly align to the bottom of the navigation bar?

Answer 1

If fixed it myself by ditching Initializr (too powerful for what I needed) and using the following structure:

<div id="container">
    <div class="navbar">
        <a href="index.html" class="logo">
            <img src="img/logo.png" />
        </a>
        <div class="nav">
            <ul>
                <li><a href="page1.html">Page 1</a></li>
                <li><a href="page2.html">Page 2</a></li>
            </ul>
        </div>
    </div>
    <div class="clear"></div>
    <div class="content">
        Content here
    </div>
</div>

And the following CSS:

#container { width: 1170px; margin: 0 auto; }
.navbar, .content { font-size: 1.6em; }
.navbar .logo { float: left; }
div.nav ul { list-style: none;padding: 0;}
div.nav ul li { display: inline;}
div.nav ul li a { display: block; background-image: url('../img/linksBackground.png'); background-position: 0 80px; background-repeat: no-repeat;
margin-top: 115px; float: left; padding: 11px 30px 9px 30px; text-decoration: none; color: #5dd2ff; }
div.nav ul li a:hover {color: #fff; background-position: 0 160px; background-color: #95e2ff;}
div.nav ul li.active a { color: #fff;font-weight: bold; background-position: left top; background-color: #5dd2ff;}

.clear { clear: both; }