I am regularly asked how my compact (51px high) and stretchy custom header is done. Here's the code from mine.

HTML in the custom header:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div>

CSS in advanced customization:

/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
    margin: 0 0 5px 0;
    padding: 10px 15px 10px 15px;
    background: transparent url(http://jfriend.smugmug.com/photos/632707648_Ymb75-O.jpg) repeat-x;
    min-width: 838px;
}

#myBanner {
    background: transparent url(/photos/631724792_9goWJ-O-1.png) no-repeat;
    height:31px;
    width: 370px;
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://jfriend.smugmug.com/photos/631724792_9goWJ-O-1.png");
}

#navcontainer {
    font-size: 120%; 
    width: 500px; 
    height: 31px; 
    float: right;
}

#navcontainer ul {
    margin: 0;
    padding: 5px 0;
    list-style-type: none;
    text-align: right;
}

#navcontainer li {
    display: inline;
    margin: 0 8px;
}


#navcontainer a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;} 

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
    border-bottom: 1px solid #DDDD00;
    border-top: 1px solid #DDDD00;
}

And, I've installed two customization scripts:

1) The dynamic navbar script #21 here that automatically highlights the current page in the navbar.

2) The custom contact form (for pro sites only) script #30 here to power the contact me link.

To use this on your site, you have to remove any existing custom header (whether Easy Customizer or custom), change all links to be your own (image and click destinations), adjust the banner image size to match your particular image, configure the navbar to be the destinations you want and install the two scripts mentioned above.

Amazing, works great, is there a way to push the banner next to the navbar and have them centered? If not not a big deal, thanks for all you do, I'd have a pretty boring looking site if it weren't for your help.

Originally Posted by bbeck4x4 Amazing, works great, is there a way to push the banner next to the navbar and have them centered? If not not a big deal, thanks for all you do, I'd have a pretty boring looking site if it weren't for your help.

You'd have to set the width of the myHeader div and set left and right margin to auto to center it. This would keep your background from going all the way across. If you want it to go all the way across, you'd have to nest another div inside of myHeader and set the width on that instead.

K, I'll work on the centering part, then attempt the new div, will that require anything new in the html section or can I do it all in the css?

Originally Posted by bbeck4x4 K, I'll work on the centering part, then attempt the new div, will that require anything new in the html section or can I do it all in the css?

New div looks like this:

<div id="myHeader">
<div id="myHeaderInner">
<div id="navcontainer">
<ul>
<li class="navCurrentPageParent navCurrentPageParentExact"><a class="navCurrentPage navCurrentPageExact" href="/">Home</a></li>
<li><a href="/gallery/8868328_TxCuL">Testimonials</a></li>
<li><a href="/gallery/15389264_KKH2i">Contact/Pricing</a></li>
<li><a href="/galleries">Clients</a></li>
<li><a href="/popular">Popular</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div>
</div>

new CSS:

#myHeaderInner {width: 900px; margin: 0 auto;}

Remove these lines of CSS:

margin-left:2cm;
margin-right: 2cm;

That's some fast code reading, I swear trying to read this is like reading the code in the Matrix. So I have the new in, but they are still apart =( what parts to adjust?

Originally Posted by bbeck4x4 That's some fast code reading, I swear trying to read this is like reading the code in the Matrix. So I have the new in, but they are still apart =( what parts to adjust?

#myHeaderInner {width: 900px; margin: 0 auto;}

goes on a line by itself, not inside that other rule.

So you do read the Matrix =) ,, Thank you, If your ever in Utah and need something, let me know.

I thought I did everything right, but now my navbar is all stacked up at the right side of the screen. Is there a way to have something like my other banner with small pictures in it, but that's able to float so it looks good on any size screen? I want the top of my page to pop and "catch" people and I don't know if this does it...

Originally Posted by Jamesbjenkins I thought I did everything right, but now my navbar is all stacked up at the right side of the screen. Is there a way to have something like my other banner with small pictures in it, but that's able to float so it looks good on any size screen? I want the top of my page to pop and "catch" people and I don't know if this does it...

Move your banner after your navbar (like in my code) and then increase the width of your navbar so it isn't forced to wrap to two lines. You can have a wider banner if you want as long as you're confident banner + navbar will fit on most screens. I personally wouldn't make anything wider than 1000px.

I can't get the navbar to move up to level with the top of the logo, regardless of where I put it in the order of the CSS. Everything else seems to be OK, I just need the navbar to not sit underneath the grey background like it is now. Is that possible?

Originally Posted by Jamesbjenkins I can't get the navbar to move up to level with the top of the logo, regardless of where I put it in the order of the CSS. Everything else seems to be OK, I just need the navbar to not sit underneath the grey background like it is now. Is that possible?

The place you need to move the banner after the navbar is in your custom header (the actual HTML code), not in your CSS.

Originally Posted by jfriend The place you need to move the banner after the navbar is in your custom header (the actual HTML code), not in your CSS.

Really sorry to still be dealing with this! I moved the HTML div tag for the banner after the navbar, and moved the CSS for the banner back to its original location in your tutorial. Now the Banner isn't aligned left anymore, and is in fact behind the slideshow. WTF. I thought I had a good basic understand of HTML and CSS, but I don't. Sorry.

Help?

Originally Posted by Jamesbjenkins Really sorry to still be dealing with this! I moved the HTML div tag for the banner after the navbar, and moved the CSS for the banner back to its original location in your tutorial. Now the Banner isn't aligned left anymore, and is in fact behind the slideshow. WTF. I thought I had a good basic understand of HTML and CSS, but I don't. Sorry. Help?

You didn't quite get it after the navbar (it's actually in the navbar). Change your entire custom header to this:

<div id="myHeader">
<div id="navcontainer" class="menu">
<ul>
<li class="navCurrentPageParent navCurrentPageParentExact"><a class="navCurrentPage navCurrentPageExact" href="/">Home</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Other/Hola/10298107_smpho">Photographer</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="http://www.ballengerphotos.com/Other/blog/12880372_m7Akn#000000_">Blog</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Clients/Services-Offered/10298925_i2dzq">Services</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Photography">Galleries</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/Client%20Shots">Clients</a></li>
<li>&nbsp;|&nbsp;</li>
<li><a href="/gallery/12931908_DoTdq/1/000000_">Contact</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div> <!-- closes myHeader -->

Hi

I tried (with no luck) to apply the custom header...

I try to accomplish following: Have only a JFriend slideshow (that I have managed!) with a header containing my logo (left) and a navbar (right), white font on black background. I have drawn a logo being a png file with white text on transparent background.

Situation is, I can show the navbar but under no circumstances my logo! Also, any choices for the background seem to have no effect. Last, but not least, the changes do show as applied and wished for at my homepage as i am logged in as in "visitor view", but are not visible in other browsers in my system (Firefox 4, Chrome) as well as in Safari in other systems or user accounts, with no smugmug cookies.

Is it perhaps a dimensions issue? I set the minwidth of header as the sum of navbar and logo and its height as the logo height.

I really would appreciate any help.

Thanks in advance.


My CSS code:

/**********************************************************
** header/navbar formatting
***********************************************************/

#myHeader {
    margin: 0 0 5px 0;
    padding: 10px 15px 10px 15px;
    background: transparent url(http://smug.sklavos.com/photos/i-Dh8Wvjt/0/D/i-Dh8Wvjt-D.gif) repeat-x;
    min-width: 1020px;
}

#myBanner {
    background: url(/photos/i-q7rMxP7/0/D/i-q7rMxP7-D.png) no-repeat;
    height: 100px;
    width: 520px;
    _background: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingmethod=image, src="http://smug.sklavos.com/photos/i-q7rMxP7/0/D/i-q7rMxP7-D.png");
}

#navcontainer {
    font-size: 120%; 
    width: 500px; 
    height: 100px; 
    float: right;
}

#navcontainer ul {
    margin: 0;
    padding: 5px 0;
    list-style-type: none;
    text-align: right;
}

#navcontainer li {
    display: inline;
    margin: 0 8px;
}


#navcontainer a {
    text-decoration: none;
    color: #FFFFFF;
    padding: 2px 0 1px 0;
}

#navcontainer a:hover {color: #FFFF00;}

/* don't change the text color of the current item */
#navcontainer .navCurrentPage:hover {color:#FFFFFF;} 

/* highlight individual menu items when their page is current */
#navcontainer .navCurrentPage {
    border-bottom: 1px solid #DDDD00;
    border-top: 1px solid #DDDD00;
}

The custom header code:

<div id="myHeader">
<div id="navcontainer">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/galleries">Galleries</a></li>
<li><a href="/popular">Popular</a></li>
<li><a href="/Portfolio">Portfolio</a></li>
<li><a href="/Family">Family</a></li>
<li><a href="/" onclick="return false;" class="customContactButton">Contact Me</a></li>
</ul>
</div>
<div id="myBanner"></div>
</div>

Originally Posted by Sklavos Hi I tried (with no luck) to apply the custom header... I try to accomplish following: Have only a JFriend slideshow (that I have managed!) with a header containing my logo (left) and a navbar (right), white font on black background. I have drawn a logo being a png file with white text on transparent background. Situation is, I can show the navbar but under no circumstances my logo! Also, any choices for the background seem to have no effect. Last, but not least, the changes do show as applied and wished for at my homepage as i am logged in as in "visitor view", but are not visible in other browsers in my system (Firefox 4, Chrome) as well as in Safari in other systems or user accounts, with no smugmug cookies. Is it perhaps a dimensions issue? I set the minwidth of header as the sum of navbar and logo and its height as the logo height. I really would appreciate any help. Thanks in advance.

No need to post your code - we can see it right in your page. From what I can tell, the gallery where your banner and background images are located are not allowing originals. And, both URLs are wrong. Enable originals and then get the URLs using the Share/Get a Link button.

Originally Posted by jfriend No need to post your code - we can see it right in your page. From what I can tell, the gallery where your banner and background images are located are not allowing originals. And, both URLs are wrong. Enable originals and then get the URLs using the Share/Get a Link button.

I could never thank you enough! The links were to blame.

Originally Posted by Sklavos I could never thank you enough! The links were to blame.

One more question to you all.

I am quite amazed by the way the upper part of the photo in the slideshow is shown as transparent background in the stretchy header in this site

http://www.wendywilkersonphotography.smugmug.com/

How can this be realized? Reposition the biobox? Any help appreciated!

Originally Posted by Sklavos One more question to you all. I am quite amazed by the way the upper part of the photo in the slideshow is shown as transparent background in the stretchy header in this site http://www.wendywilkersonphotography.smugmug.com/ How can this be realized? Reposition the biobox? Any help appreciated!

That's just a full-screen slideshow with a semi-transparent background for the header. Described here.

Hi,

thanks for your navigation bar! It's awesome.

But, I still have a doubt: how can I make it works even on the Galleries page?? I have multiple home pages (for the slideshow on front and for the galleries page) and the bar doesn't appear at the galleries page.

the site is: retinasemrumo.smugmug.com

Thanks for your help,