Jump to content

Archived

This topic is now archived and is closed to further replies.

illinimatt81

Vertically Center Nav Menu Options in Fixed Nav

Recommended Posts

illinimatt81    21
illinimatt81

I have a larger image than 29px so I made the size of my fixed navbar image 60px which increases the size of the fixed nav. All is working fine except the navigation menu options are aligned to the top right of the fixed nav. Being aligned to the right is fine, but how can I vertically center them to they are to the right yet centered within the container? I can't seem to find the css for this with firebug.

 

UsingPagelines.com has accomplished this: http://screencast.com/t/mLNdNBL2a

 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Matt, it's almost impossible for us to discern this from an image.  We really need to see it live, to find the nuances in Firebug to find the right element.   Is the site live?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

Matt, it's almost impossible for us to discern this from an image.  We really need to see it live, to find the nuances in Firebug to find the right element.   Is the site live?

 

Hi Rob

 

My site is on a local development server, but the example I used in the image is live and can be found at http://usingpagelines.com

Share this post


Link to post
Share on other sites
Rob    547
Rob

Make sure that the height here is auto in the new site:

 

.navbar, .navbar-inner, .navbar-collapse {
    heightauto;
    overflowvisible;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

 

Make sure that the height here is auto in the new site:

 

.navbar, .navbar-inner, .navbar-collapse {
    height: auto;
    overflow: visible;
}

 

 

Rob Just tried this and it doesn't seem to have done anything.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Matt, I didn't want you to add it, just to look for it. My fault for not explaining correctly.  That should be the CSS to search for in Firebug.

 

I also found a rather substantial padding-top here;

.navbar .navline > li {
    displayblock;
    floatleft;
    padding-top1em;
}

 

 

This seems to work nicely, but you may want to adjust that 1em.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

Matt, I didn't want you to add it, just to look for it. My fault for not explaining correctly.  That should be the CSS to search for in Firebug.

 

I also found a rather substantial padding-top here;

.navbar .navline > li {
    display: block;
    float: left;
    padding-top: 1em;
}

 

 

This seems to work nicely, but you may want to adjust that 1em.

 

Very good Rob. Ended up doing a 1.2 em. Had to source the code and do the same for the search bar but no big deal.

 

Thanks!

Share this post


Link to post
Share on other sites
Rob    547
Rob

You're very welcome. As long as it worked.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

×