Icon Override & Centering Nav for Responsive Design

HTML & CSS
1

Hi,
I could use some help with two issues:

http://tinyurl.com/c55z29t

  1. I am working with the Skeleton responsive framework. I would like to have my left hand navigation centered below the logo as shown, but when I resize the browser the nav doesn’t stay in the left column. How can I get it to stay below the logo?

  2. After implementing some changes to get the Isotope js plugin to work I somewhere along the line lost some icons that were part of MagicZoom Plus. There was a magnifying glass cursor that appeared when you hovered over the thumbnail images, and the < > X icons in the upper right corner of the expanded images (see example). I figure they are being over ridden somehow or the classification of my images has changed.

Any help is appreciated! Thank you!

2

Someone in the javascript forum pointed out that I had some missing files, which fixed the missing cursors & icons. Now I just need help with the nav centering issue.

Thanks!

3

In your CSS, add a width to make applemenu the same width as the logo, and change the margins so the left and right margin are 0, as below:

.applemenu {
    font-family: 'DroidSerifRegular';
    line-height: 25px;
    margin: 25px 0 5px;
    padding: 0;
    text-align: center;
    width: 135px;
}

Works for me in Firefox - haven’t tested other browsers.

4

Thank you, TechnoBear. That worked great. Do you have any suggestions how to make the logo & nav center over the images when you resize the browser down to one row of images?