mhightower1

Hi, Is there anyway you can provide a link to the website?

Hi,

You are right. Just replace that section with

<li style="width: 100%; left: 50%; margin-left: -440px; display: block;">
<li style="width: 100%; left: 50%; margin-left: -440px; display: none;">
<li style="width: 100%; left: 50%; margin-left: -438px; display: none;">

It is good to know the size of the image when uploading if they will be different sizes in width. The margin-left is set to negative half the width of the images. I had to eyeball it because i do not know the exact width of each image.

Hope this helps!

Could you provide a link to the website

If the img has the width of your container, setting the width: 100% should work. But if not, you can also try

#logo {
background-repeat: repeat-x;
}

to fill in the extra space that is showing in chrome.

Hope this helps!

Hi, I’m not sure if this will help you but i would suggest surrounding the entire navigation (including the image) inside a div. Then, centering the image using the absolute technique.

.customLogo img {
	position: absolute;
        width:200px;
        top: 50%;
        margin-top: -100px;
        height:200px; /* Assuming that the height of the image is the same as width */
        left: 50%;
        margin-left: -100px;
        z-index: 4;
}

You should take the text-align out because you are only working with an image.
If the image is still mis-aligned, i would tinker with the margin-left and margin-right to set the image in place.

Hope this works for you!