Hey all, I need some help with my navbar. Here's what I'm trying to do.

1. Make the navbar sit underneath my custom banner.

2. Set the navbar to right adjust on the screen.

3. Set the background of the entire area behind the navbar (all across the horizontal level of the navbar, not just behind the buttons) to color #2a2b2e

4. Set the color of the navbar buttons when you hover on them to color # 286893

5. I have attempted to use Jfriend's tutorial for a dynamic navbar that highlights the current page, but I'm doing something wrong. I'd appreciate some help setting it up.

Thanks for all your help!

To start with, if you want your navbar underneath, your banner, then move the HTML in your custom header for your navbar to be after your banner instead of before it.

Then, remove the junk numbers at the end of your CSS. Remove this:

10298107

You can set the background color of the combined header/navbar area with this CSS:

#myHeader {background-color: #286893;}

Then, to fix the width of your header/banner, you need to adjust the width of the CSS for your banner to match your image. Your image is 1524 pixels wide (which is really, really wide), but your CSS specifies a width of 1260px. Those two must match for proper control over formatting.

I think I may have already posted to you once on the dynamic navbar. Change this line of your JS so capitalization of the object name in JS matches your HTML:

YE.onContentReady("NavContainer", function ()

to this:

YE.onContentReady("navcontainer", function ()

After you make all these changes, we can assess where you are in regards to the other questions.

Ok, we're making good progress. Thanks so much. Here are my issues now:

1. The dynamic navbar's current page indicator is slightly overlapping the text in the navbar. It also needs to be wider, the blue line looks tiny.

2. Please remind me the proper CSS coding to set the hover code on the navbar buttons (i.e. #286593).

Originally Posted by Jamesbjenkins Ok, we're making good progress. Thanks so much. Here are my issues now: 1. The dynamic navbar's current page indicator is slightly overlapping the text in the navbar. It also needs to be wider, the blue line looks tiny. 2. Please remind me the proper CSS coding to set the hover code on the navbar buttons (i.e. #286593).

In your bio on the homepage, your slideshow isn't working because you have errors. Change this:

var ssConfig = {  AlbumID: '10295864', 
 newWindow: 'false', 
 transparent: 'true', 
 splash:  'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png', 
 showLogo: 'false', 
 clickToImage: 'false', 
 showThumbs: 'false', 
 showButtons: 'true', 
 crossFadeSpeed: '450' 
 position:center, 
};

to this:

var ssConfig = {   AlbumID: '10295864', 
  newWindow: 'false', 
  transparent: 'true', 
  splash:  'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png', 
  showLogo: 'false', 
  clickToImage: 'false', 
  showThumbs: 'false', 
  showButtons: 'true', 
  crossFadeSpeed: '450'
};

position: center is not a valid option and each option needs to have a comma after except not the last one.

If you want the blue highlight line to be wider, then increase it's width:

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

You can set the hover color in your navbar with this CSS:

#navcontainer li a:hover {color: #286593;}

You can center both navbar and banner with this CSS (which is what I think you need with something this wide):

#myHeader {margin: 0 auto;}

Then please, go look at your homepage on a netbook or small laptop. It will probably be too wide for someone to see the whole navbar or banner.

Great help. Thanks!

1. Is there some way that I can adjust the current page indicator so it doesn't slightly overlap my navbar buttons like it's currently doing?

2. I'm going to attempt to implement your stretchy slideshow process now. My slideshow looks like crap right now.

Originally Posted by jfriend In your bio on the homepage, your slideshow isn't working because you have errors. Change this: var ssConfig = { AlbumID: '10295864', newWindow: 'false', transparent: 'true', splash: 'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png', showLogo: 'false', clickToImage: 'false', showThumbs: 'false', showButtons: 'true', crossFadeSpeed: '450' position:center, }; to this: var ssConfig = { AlbumID: '10295864', newWindow: 'false', transparent: 'true', splash: 'http://www.smugmug.com/img/ria/ShizamSlides/smugmug_black.png', showLogo: 'false', clickToImage: 'false', showThumbs: 'false', showButtons: 'true', crossFadeSpeed: '450' }; position: center is not a valid option and each option needs to have a comma after except not the last one. If you want the blue highlight line to be wider, then increase it's width: /* highlight individual menu items when their page is current */ #navcontainer .navCurrentPage {background: none; border-bottom: 2px solid #286893; border-top: 2px solid #286893;} You can set the hover color in your navbar with this CSS: #navcontainer li a:hover {color: #286593;} You can center both navbar and banner with this CSS (which is what I think you need with something this wide): #myHeader {margin: 0 auto;} Then please, go look at your homepage on a netbook or small laptop. It will probably be too wide for someone to see the whole navbar or banner.

Originally Posted by Jamesbjenkins Great help. Thanks! 1. Is there some way that I can adjust the current page indicator so it doesn't slightly overlap my navbar buttons like it's currently doing?

You'll have to give me more info about what you're seeing (browser specifics, screen shot, etc...) because I don't think I'm seeing that: