menu div overlapping image 2013 child theme

I am using a child theme for the twenty thirteen theme and have included a small image in the header that I am using as a home link. Check out that link and resize the screen. When the screen is made smaller the div that contains the UL for the menu at the top is overlapping the image in the top left corner. This overlapping is causing me to pull my hair out as it effecting the images ability to link back to the home page. I've tried raising the z-index of the image but to no avail. I guess I'm just looking for someone with a fresh eye that might be able to see a way to style this header in such a way that the full image remains clickable even though the menu div is overlapping it. Hopefully this all makes sense...

  • Adam Czajczyk

    Hey James,

    I hope you're well today and thank you for your question!

    I've took a look at your site and I've been able to make it work with some CSS changes I made via Firebug's editor. Here's what I did:

    1. I removed the following rules from .main-navigation class:
    - clear:both;
    - position:relative

    2. I added the following rule to .main-navigation class
    - float:left;

    3. I have added z-index to .logoContainer class but I think it's not necessary at all

    This way I was able to keep "Easy Greasy" image clickable no matter what was the browser size. You'll however have to add some more styling to the navigation ul/li elements to preserve the previous menu "look&feel" (except the dropdown mobile menu which seems to be looking the same as it did)

    I hope that helped!


Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.