Free Consultation: +1 (888) 374 0906

Hello! Well I took a small departure from ideaLEVER but I am glad to be back and here to share with you some more tips and tricks for your implementations.

Over the past few months and implementations I struggled with pixel perfect designs that required a specific height to the navigation. Centering the text vertically within that was dodgy and inconsistent. Enter the line-height property. Normally I avoid defining this property because it can wreak so much havoc over the rest of the site but if you define it in very specific instances it actually can be your best friend. Forget fiddling with padding on the top and bottom of your navigation elements simply add a line-height to the text class and tada! Done. Cross browser friendly and consistent.

A code example is below:
.RadMenu_FlyoutHorizontal .text {
display: block;
padding: 0 15px;
text-align: center;
line-height: 36px;

And of course then for the sub navigation you are going to need to reset some of those values like so:

.RadMenu_FlyoutHorizontal .group .text {
text-align: left;
font-size: 10px;
line-height: 24px;

The trick to using this of course is to remember your box model and not over define. We don't need height properties or any top or bottom padding. Adding those will be sure to mess with your alignment. Remember k.i.s.s (keep it simply silly). Less is more.
Write A Comment

Post A Comment


Sign up for email updates from our team

View Our Privacy Policy or Terms of Use