• 0
Sign in to follow this  
Followers 0

Vertically Center Nav Menu Options in Fixed Nav

Question

Posted · Report post

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

7 answers to this question

  • 0

Posted · Report post

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.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

 

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0