Hide Navbar from Homepage...

[jlauren]

Hi there!

Can't seem to figure out what CSS coding I need in order to hide my Navbar on my homepage but keep it visible on all other pages once guests have entered the site. I'd like to do this in order to bump the slideshow up and simplify the homepage.

www.jlauren.smugmug.com

Thanks!

jlauren

[jfriend]

You can hide it from your homepage with this CSS:

.homepage #navcontainer {display:none;}

If you want it to show on your galleries page (which is a copy of your homepage), then add this right after that line:

.galleries #navcontainer {display:block;}

[jlauren]

thanks so much! That worked perfectly.

One more question:

It seems my banner is not quite aligned with my slideshow, how can I fix this?
Thanks!

[jfriend]

thanks so much! That worked perfectly.

One more question:

It seems my banner is not quite aligned with my slideshow, how can I fix this?
Thanks!

Your slideshow (800px) is wider than it's container (750px) so it can't center.

Add this to widen the container:

#homepage {width: 850px;}

[jlauren]

Thanks again for all your help and quick responses! That did the trick, but I think the alignment is just a tad off and I believe it's the banner. Unless you have any suggestions on how to shift the banner over to the right a little, I'll try to figure out a way to tweak it myself!

[jfriend]

Thanks again for all your help and quick responses! That did the trick, but I think the alignment is just a tad off and I believe it's the banner. Unless you have any suggestions on how to shift the banner over to the right a little, I'll try to figure out a way to tweak it myself!
Here's the issue. Your banner has all sorts of empty space on the left side. Your banner CSS also has a width and height that don't match the image.

The best solution is to edit your banner so your graphic is truly centered in the image and then edit your CSS to have exactly the same height and width as the banner image. You can see how uncentered your graphic is in the banner image:

http://jlauren.smugmug.com/photos/447994171_zZPdh-M.jpg

So, to fix this, move the graphic over to the center of your banner image (equal amounts of space on either side), then update your banner CSS to have a height and width that match your banner image. Then, everything will center perfectly:

#my_banner {
width: 600px;
height: 140px;
margin: 0 auto;
background: url(http://jlauren.smugmug.com/photos/447994171_zZPdh-M.jpg) no-repeat;
}