CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Luis Palacios
Luis Palacios

Reputation: 754

Nav in the Bottom inside a NavBar using bootstrap?

Hey guys not sure if my title is right but i'm new to bootstrap and i am trying out the navbar loving it so far but i'm stuck trying to accomplish this

enter image description here

what i want is for my items inside my ul bar marked in yellow to be in the bottom where i marked also in yellow, is there any class i can use for this or do i have to add my own CSS class to do this?

here is my html code 

 <div class ="navbar navbar-fixed-top">
    <div class="navbar-inner">
    <div class="container">
        <a href="default.aspx" class = "brand"><img alt ="Imagen no disponible" src ="Img/Aralogo.png" /></a>
        <div class ="nav-collapse collapse">
            <ul class="nav">
            <li><a href ="#"><h4> Compañia </h4></a> </li>
            <li><a href ="#"><h4> Nomina </h4></a></li>
            <li><a href ="#"><h4> Inventario </h4></a></li>
            <li><a href ="#"><h4> Planificacion</h4></a></li>
            <li><a href ="#"><h4> Reportes </h4></a></li>
            </ul>
        </div>
        </div>
    </div>

thanks.

Upvotes: 0

Views: 1163

Answers (2)

Serlite
Serlite

Reputation: 12258

Hmmm...if you want those navbar links moved down, you could just rewrite the padding style for them. Applying this style after the Twitter Bootstrap styles have been applied will achieve what I believe you're looking for:

.navbar .nav > li > a {
    padding: 20px 15px 0;
}

If that isn't low enough for you, you could alter the h4 element as well, with:

.navbar .nav > li > a > h4{
    margin: 20px 0 0;
}

(And if that's too low, you could change the 20px to some lower number.)

I hope this helps you out. It can be tricky sometimes to get what you want with a CSS framework if it falls outside of the basic design, but keep at it! Good luck!

Upvotes: 1

NateWiley
NateWiley

Reputation: 23

I ran into this recently. Just add an additional container around the brand element

<div class="container">
<a href="default.aspx" class = "brand"><img alt ="Imagen no disponible" src ="Img/Aralogo.png" /></a>
</div>

Upvotes: 0

Related Questions