Bootstrap Nav Vertical Align Text Bottom?

[dzhax]

I am using the Modern Business Theme, I am trying to add an image to the Brand (top left) section of the page. The image is 128px tall. My problem is the navigation bar stays the same height as it is now and the image bleeds into the carousel below. Also the text from the title shows up below the image. I was hoping to have the image and the title on the same line, the title be aligned to the bottom of the nav, and the rest of the navigation links (menus and links on the right) also be bottom aligned.

 

The Following is my Navigation HTML:

<!-- Navigation -->    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">        <div class="container">            <!-- Brand and toggle get grouped for better mobile display -->            <div class="navbar-header">                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">                    <span class="sr-only">Toggle navigation</span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                    <span class="icon-bar"></span>                </button>                <a class="navbar-brand" href="index.php">                    <img src="image/logo.png" alt="Logo" />  Site Title                </a>            </div>            <!-- Collect the nav links, forms, and other content for toggling -->            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">                <ul class="nav navbar-nav navbar-right">                    <li class="dropdown">                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Category 1 <b class="caret"></b></a>                        <ul class="dropdown-menu">                            <li>                                <a href="#" target="_blank">Item 1</a>                            </li>                            <li>                                <a href="#" target="_blank">Item 2</a>                            </li>                            <li>                                <a href="#" target="_blank">Item 3</a>                            </li>                            <li>                                <a href="#" target="_blank">Item 4</a>                            </li>                        </ul>                    </li>                    <li>                    	<a href="#">Search <span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>                    </li>                    <li>                        <a href="#">Other Link</a>                    </li>                </ul>            </div>            <!-- /.navbar-collapse -->        </div>        <!-- /.container -->    </nav>

I have played around with adding some style tags to some of the elements but I am unable to accomplish my desired result.

 

 

I got the title on the same line as the image by adding:

... style="display:inline-block;"

to the image.

 

 

I was able to make the navigation bar taller by manually defining a height in the nav tag, but I would prefer a dynamically changing height in case this image were to change size.

 

 

I tried to add:

vertical-align:bottom

in multiple places to try and push the text to the bottom of the nav when I defined the height of the nav, but I was never able to get the text to change it's current alignment.

 

 

Purely css changes are preferred as the template is perfect otherwise.

 

 

I am pulling my hair out at this point.

Any help is much appreciated.

Edited February 16, 2015 by dzhax

[dzhax]

Update:

 

I have been playing around in chrome with different css on elements I have added

.navbar{	min-height:150px;}.navbar-brand{	vertical-align:bottom;}.navbar-brand>img{	display:inline-block;}

I am not keen on defining the height of the navbar manually but it works for now.

So now the navbar is taller than my image, the title is on the same line, and the title is bottom aligned.

 

I am still unable to get the navbar links to move down.

 

If anyone knows a dynamic way to set the height of the navbar, and if anyone knows how to move the right navbar links to the bottom of the re-sized navbar please throw me a bone.

 

 

I just realized that changing the min-height of the navbar bleeds over the content below. This is so frustrating.

Edited February 16, 2015 by dzhax

[dsonesuk]

Can you supply a image on what are looking for? for the brand image you could use background-image instead, with img tag, you could probably use max-height: or max-width, then make opposite edge width: auto; or height: auto,. Usually using line-height set to hieight of nav will vertically centre in the links in the middle.