Bootstrap 3 - vertical alignment of navbar content

Question

http://www.bootply.com/tfGjhlJnPL

I'm trying to get the right-aligned navigation items to align vertically with the bottom of the left-aligned image.

I also want the navbar toggle button to line up with the bottom of the image in the same way when the navbar is collapsed...

Any suggestions welcome :)

Answer 1

Well, if you're not adverse to it, this can be achieved using primarily position:absolute. For example, based on the current styles you have, this CSS would work:

.navbar-header{
    position:relative;
}
@media (max-width: 991px) {
    .navbar-toggle{
        position:absolute;
        right:0;
        bottom:0;
    }
}   
@media (min-width: 991px) {
    .navbar-nav{
        position:absolute;
        right:0;
        bottom:0;
    }
}

Here's an updated Bootply to show you what this achieves. Depending on your preference, you may also want to adjust each element's padding or margin to alter just how close it is to the bottom of the header area (I did not change these styles in my demo). Hope this helps! Let me know if you have any questions.