• Gear
  • Shots
  • Photo Craft
  • Video
  • Wide Angle
  • Support
  • New Stuff
  • More
Support Legacy SmugMug Customization How do you create a horizontal NavBar (logo and buttons over a bar)?

Need some help with your New SmugMug Site?

Dgrin Challenges

Our Challenges moderator has lined up an new set of challenges for you. The Weekly Word Challenge. Get all the details and participate in the conversation Weekly Word Challenge.

Past DSS Challenge Winners, DSS Challenge Rules, and other important DSS Challenge information is here.

Looking for a little challenge? The Dgrin Mini-Challenges are a great way to challenge yourself. Take a moment to look through past winners and find the current Mini Challenge here.

From Around the Net

Enjoy a few of our favorite articles from around the 'net. If you have something you think we should see, post it here and we'll have a look.

Journeys

Landscapes

Sports

 
Thread Tools Display Modes
Old Apr-04-2012, 01:07 PM
#1
twalp is offline twalp OP
Big grins
How do you create a horizontal NavBar (logo and buttons over a bar)?
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.

Last edited by twalp; Apr-04-2012 at 04:20 PM. Reason: For clarity
Old Apr-04-2012, 01:10 PM
#2
denisegoldberg is online now denisegoldberg
Major grins
denisegoldberg's Avatar
See JFriend's thread Compact, stretchy, dynamic custom header. The information you are looking for is in the first post of that thread.
Quote:
Originally Posted by twalp View Post
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
__________________
http://www.denisegoldberg.com ... http://denise.smugmug.com

Musings & ramblings at http://denisegoldberg.blogspot.com, quick posts in google+
Old Apr-04-2012, 01:27 PM
#3
twalp is offline twalp OP
Big grins
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!
Old Apr-04-2012, 02:21 PM
#4
Allen is offline Allen
"tweak 'til it squeaks"
Allen's Avatar
Quote:
Originally Posted by twalp View Post
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.
Code:
<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.
Code:
#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 */

}
__________________
Al - Just a volunteer here having fun :D
My Website my Blog
Mozilla Firefox Web Developer Firebug
Customization FAQ Banner/Navbar/Slideshow Tutor
Old Apr-04-2012, 04:25 PM
#5
twalp is offline twalp OP
Big grins
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!

Last edited by twalp; Apr-04-2012 at 04:31 PM. Reason: For clarity and closure
Tell The World!  
Similar Threads Thread Starter Forum Replies Last Post
NavBar Customization Kent R Legacy SmugMug Customization 2 Jan-01-2012 06:10 AM
Navigation Bar an other buttons on top of Logo rocaver Legacy SmugMug Customization 1 Nov-22-2011 03:55 PM
Navbar help thread Andy Legacy SmugMug Customization 4975 May-31-2010 03:29 PM
Floating buttons between my Nav links and Logo ezlotogura Legacy SmugMug Customization 15 Sep-29-2008 08:50 AM
Custom Watermark Tutorial javier.rinaldi SmugMug Support 0 May-23-2006 04:56 AM


Thread Tools
Display Modes

Posting Rules  
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump