Hi Jacinto,
Here is some code to hopefully resolve the open div that is fighting the slideshow centering. If for some reason the code in step 2 is not in your HTML window let me know and don't proceed with the other steps. Let me know and I will provide you with alternate code to make your logo clickable to your homepage. I have not used the customizer so the contents of your HTML window may or may not have that configurable code which I am relying on in that step.
Try this:
1)
Back-Up your existing code by emailing it to yourself using the button located at the bottom of the Site-Wide Customization page and confirm the email was received and you can open it properly in case you need to reverse a change made in the following steps.
2)
Find in your HTML Custom Header Section the following entry and Delete it (should be near the top of the window):
<div id="customHeaderContainer"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><div id="customLogo"><img src="http://jacintopolicarpo.smugmug.com/photos/675350093_yf57L-O.png" style="visibility: hidden;" border="0"></div></td><td></td></tr></tbody></table></div>
Then you will replace that deleted entry with the following entry (this includes the code to click the banner to return
to your homepage):
<div id="customHeaderContainer"><table border="0" cellpadding="0" cellspacing="0" width="100%"><tbody><tr><td><div id="customLogo"><a href="http://jacintopolicarpo.smugmug.com" title="Click Here to Return to the Homepage"><img src="http://jacintopolicarpo.smugmug.com/photos/675350093_yf57L-O.png" width="387" height="82" border="0" /></div></td><td></td></tr></tbody></table></div>
3)
Find in your HTML Custom Header Section the following entries and Delete them:
<div id="my-header-image">
<div id="my_banner"> </div>
<div style="text-align: center;" id="navcontainer">
<br>
4)
Directly after the above entry you deleted you should find the following entry. You will want to rename the text in
parenthesis as shown:
<div id="my_header">
Rename "my_header" to "my_navbar" and should look like this:
<div id="my_navbar">
5)
In your HTML Custom Header window find the following entry and delete it (should be found after your navbar code):
<div id="my banner">
<a href="http://www.jacintopolicarpo.com">
<img src="/img/spacer.gif" border="0" height="0" width="0"></a>
</div>
6)
In the CSS window, find the following three entries and delete them:
#my_headerContainer {
width: 100%;
height: 100px;
padding-top: 20px;
margin: 0 auto;
background: transparent;
position:relative;
}
#my_logo {
width: 48%;
height: 86px;
margin-left: 1%;
margin-right: 1%;
padding-top: 0px;
background: url(http://jacintopolicarpo.smugmug.com/...65_pU3rL-O.png) no-repeat;
float: left;
}
#my_navbar {
width: 48%;
height: 30px;
margin-right: 1%;
margin-left: 1%;
padding-top: 28px;
background: transparent;
float: right;
}
Then you will replace the deleted code with these three entries:
#customHeaderContainer {
width: 750px;
height: 88px;
padding-top: 10px;
margin-left: auto;
margin-right: auto;
background: transparent;
}
#customLogo {
width: 387px;
height: 82px;
margin-left: auto;
margin-right: auto;
background: transparent;
}
#my_navbar {
width: 750px;
height: 30px;
margin-right: auto;
margin-left: auto;
padding-bottom: 5px;
background: transparent;
}
Check the preview button and if it looks good save with the update button and make sure your other pages display properly with the new changes.
Attached is the screenshot I get when using the code in WebDev: