I'm Back (Again) And Looking For Help With New Responsive Site

Hi Guys

Hope ya'll enjoyed your vacation from my barrage of questions cause I'm back and looking for help . . . again.

So I have spent my time away from pestering to try to build a new responsive site and I got it pretty much the way I want it . . . with a few exceptions. And that's where I need some help.

First off, for whatever reason, all the help I have gotten here dealing with making a responsive menu is just not sinking in . . . yet. So that's where I need help first. Because I know ya'll are probably tired of explaining this to me over and over, I would be willing to pay to get this part of the site done . . . assuming that the cost is reasonable and I can afford it.

I thought I had this figured out, but I must have screwed something up along the way. Anyway, my css for the nav menu looks like:

#navMenu:before {
        display:none;
    }
    #navMenuCheck + label {
        position:absolute;
        z-index:99;
        right:0.25em;
        top:0.3em;
        width:3em;
        padding:0.5em 0;
        background:#FFF;         /* hamburger background color */
        border:0.25em solid #000;
        -webkit-border-radius:0.75em;
        border-radius:0.75em;
    }
    #navMenuCheck + label:hover {
        background:#CCC;
    }
    #navMenuCheck + label:before,
    #navMenuCheck + label:after {
        content:"";
        display:block;
        height:0.5em;
        margin:0 0.5em;
        border:solid #000;      /* hamburger layers color */
        border-width:0.25em 0;
    }
    #navMenuCheck + label:after {
        border-width:0 0 0.25em;
    }
    #navMenu {
        display:none;
        padding:0.5em 0.5em 0;
    }
    #navMenuCheck:checked ~ #navMenu {
        display:block;
    }

Code (markup):

And my HTML looks like:

<ul id="nav">  
        <li><a href="/">Home</a></li>
        <li>
            <a href="">All Categories</a>
            <ul>
                <li><a href="automotive.php">Automotive</a></li>
                <li><a href="cell-phone-accessories.php">Cell Phones & Accessories</a></li>
                <li><a href="computer-networking.php">Computers & Networking</a></li>
                <li><a href="electronics.php">Electronics</a></li>
                <li><a href="new-arrivals.php">New Arrivals</a></li>
                <li><a href="top-sellers.php">Top Sellers</a></li>
            </ul>
        </li>
        <li><a href="about-us.php">About Us</a></li>
        <li><a href="shipping.php">Shipping</a></li>
        <li><a href="returns.php">Returns</a></li>
        <li><a href="contact.php">Contact Us</a></li>

    </ul>

Code (markup):

Next question.

When I reduce the size of a page down to mobile size, things are not lining up to look good. If you take a look at the pic below, you can see what I'm talking about.



My question is . . . is it necessary/beneficial to have the roll-over thumbnails? If it is, then should they maybe be centered under the main image?

I am just not sure how best to handle this so I am looking to the experts for some input. I am ready to launch this site and give it a go, but this has been bugging the crap out of me cause I want it to work well and look good so I can use it to make my first million dollars.

Thanks for any and all advice with this . . .

 

You need to change display: block; to display: inline-block; (or add display: inline-block; if it's not there) in the css for those thumbnails.