example 1 of 10,000


example 2 of 10,000


These are really common design elements: the top-most element -- I believe some call it a NavBar -- consists of a logo and navigation buttons over a horizontal bar-like background. See Friend Family Photography as a working example (at least as of 4-2012).

Easy Customize will enable you to display your logo and navibation buttons, but no "bar" behind them. Also, if the buttons are right-justified they really hug the right side of the browser window, often too far from the logo and other page elements to be aesthetically pleasing on the typical widescreen monitor. I want to insert a little padding between them and the right window edge.

So the Support "Hero" on staff today told me that Advanced Customization is the only solution, and to use this forum and your FAQs to figure out how.

I found this thread from 2009 about "Adding Background Image behind Header/NavBar". It eventually did not lead me to a working solution so I'm forced to plead for help. It's probably been answered somewhere in these several years of posts and rabbit trails, I just can't find it.

How do I do it? I've got the navigation buttons working. But I need the recipe for inserting my 150px high by 300px wide logo to the left of the buttons along with a bar element behind the logo and buttons.

See JFriend's thread Compact, stretchy, dynamic custom header. The information you are looking for is in the first post of that thread.

Originally Posted by twalp As you can see at my site I've got the navigation buttons working (they're purposely crippled at present). But I need the recipe for inserting my 150px high by 300px wide logo to the left of the buttons along with a bar element behind the logo and buttons.

You didn't include a link for your site, so no one can look at it. Please add it to your signature so it is always available for the helpers here. Click the clipboard in the navbar above, then Edit Signature.

150px high is quite tall for a logo. If you look at JFriend's CSS you will see that his is 31px high. For comparison, the banner / nav on my site is 60px high.

--- Denise

Thank you for replying and bringing the omission to my attention. I've edited my post to add the link. Insofar as the logo size, when I had it working using Easy Customize it looked okay. I may adjust it once I can actually see it in line with the buttons and yet-to-exist bar!

Originally Posted by twalp Thank you for replying and bringing the omission to my attention. I've edited my post to add the link. Insofar as the logo size, when I had it working using Easy Customize it looked okay. I may adjust it once I can actually see it in line with the buttons and yet-to-exist bar!

This will get you started. 150px is rather high for a logo if you're trying to emulate the sites referenced.
I've added a spacer gif and a temporary blue border so you can see where it goes. The header area uses a
transparent background for now and can be changed to a gradient later but the logo might need to
be not so high.

Change your header to this. The red part is temporary. The spacer gif would be removed after you
add the image to the CSS. It's there so the area is reserved.

<div id="myHeader">

<div id="navcontainer">
<ul>
<li class="navCurrentPageParent navCurrentPageParentExact"><a href="/">Home</a></li>
<li><a href="/gallery/22073171_SxzWj8">About Me</a></li>
<li><a href="/gallereez">Galleries</a></li>
</ul>
</div> 

<div id="myBanner">
<img src="/img/spacer.gif" width="300" height="150" border="0" />
</div>

</div>  <!-- closes myHeader -->

<div style="clear: both;"></div>

Add to your CSS. Remove the blue border after you add in your actual image, size, etc. This
uses a transparent png. You could use a jpg but it might not look as good.

#myHeader {
   height: 158px;
   background: rgba(255, 255, 255, .10);  /* transparency .10 */
   padding: 5px 5px 0 5px;
}


#myBanner { border: 1px solid blue;
   width: 300px;
   height: 150px;
   margin: 0;
   background: url(/photos/xxxxxxxx_xxxxx-O.png) no-repeat;
  _background: none;
  _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true,
   sizingmethod=image, src='/photos/xxxxxxxx_xxxxx-O.png');
}

/*-------------------
Custom Navbar per 1932803
---------------------*/

#navcontainer {
   float: right;
   width: 500px;
   margin-top: 60px;  /* move up and down */

}

Thank you Denise (and JFriend)! The post entitled "Compact, stretchy, dynamic custom header" was indeed the answer I needed. For anyone reading this in the future note that the navigation buttons will be positioned at the top of the Navbar. To bring them downward so they're in line with the bottom of the logo I changed the padding for "#navcontainer ul" to 100px.

I want to also thank Allen whose reply I didn't see until after implementing the solution supplied by Denise. When I have time I'll try Allen's suggestion, to see how it works and learn from it.

I am humbled by your generosity of time and knowledge. Thank you to all!