Aligning Text Vertically (to bottom) in Navbar

lionsroarmusic · September 2011

Hello -

I am using the FreeStack Theme and am using the FreeStack Nav Menu 6 Stack which allows me to use background images in the navbar. Because of my image layout in the navbar I am wanting the navbar text to align to the bottom of the navbar. By default it is always in the center. Is it possible using CSS to change the vertical alignment of the navbar text? If so, how can this be done?

I have been trying to find a solution on the web and have not been able to figure this out. Much thanks for the help!

Best,

Lion

Sundog · September 2011

Give this a go

#nav li a {
padding-bottom: 0px!important;
padding-top: 10px!important;
}

Adjust the padding-top to adjust the height of each nab bar item

lionsroarmusic · September 2011

Thanks Sundog! Perfect.

lionsroarmusic · September 2011

Hi Sundog,

One more question. In the attached screenshot I have made the navbar height 29px which is the same as the height of the navbar background and rollover images. I have applied the CSS you provided as followed:

#nav li a {
padding-bottom: 0px!important;
padding-top: 19px!important;
}

This CSS pushed the text down to the bottom of the navbar, however, you can see by the red border lines that there is a padding that still exists on the bottom of the navbar indicated by the red border lines extending beyond the image. This is not ideal because I do not want the end-user's cursor to indicate a link before they actually rollover the navbar text. The attachment is only a mock-up and in my actual implementation there will not be any border. I have looked at the .html and .css files for the FreeStack Nav Menu 6 Stack and I do not see any extra padding applied beyond the horizontal navbar padding, however, I certainly could be missing something.

Can you suggest a CSS that will remove this bottom padding?

Much thanks.

Lion

Realmac Software

Aligning Text Vertically (to bottom) in Navbar

Comments

Leave a Comment