I am finally getting time to do some more customizing. I am getting pretty close to making my SmugMug site (http://photos.bradfordbenn.com/) look closer to my text site (http://www.bradfordbenn.com/). Currently the problem I am having is positioning the Navigation Bar I created.

If you look at http://photos.bradfordbenn.com/ you can see how the Navigation Bar is in the center. If I do not include the align="center" command it goes far left. I placed it in the "center" to make it less objectionable while working to fix it.

My goal is to have it aligned with the SmugMug Pro Logo, slide show, breadcrumbs... etc.

I thought about just setting a table width and winging it to look close, however that would not be right either as when the page layout changes such as on my travel gallery http://photos.bradfordbenn.com/Trave...16137038_HjAT2 I would like the navbar to be aligned still.

Ultimately I am wanting to add the search box to my navbar and remove the SmugMug header. I also am working on learning to do it as a pure text and CSS table instead of using images.

<bump>

Surround the navbar in a div. Give the div a CSS id. Using CSS set the width of the div to the same as the width of the page you're trying to match. For your homepage, to match the Smugmug logo, that would be 750px wide.

Other pages in the site might be a different width. If you want your header to do something different on those pages, then you use different CSS that targets the header on just those pages.

I might ask why you are keeping the Smugmug header at all. Most people turn it off as soon as they have their own header.

Thank you John. I tried the div tag but have not been able to get it to stretch as the theme does. So if the theme is a stretchy one I would like my nav bar to go all the way left, the way the SmugMugPro logo does. If it is a fixed width to have it go to the fixed width. Perhaps the better question is what class is the SmugMug logo positioner as I was not able to ascertain it using the web developer plugin in firefox.

I am planning on getting rid of the SmugMug header once I get this stuff worked out. My ultimate goal is to make it look as similar as practical to my personal site.

Originally Posted by BradfordBenn Thank you John. I tried the div tag but have not been able to get it to stretch as the theme does. So if the theme is a stretchy one I would like my nav bar to go all the way left, the way the SmugMugPro logo does. If it is a fixed width to have it go to the fixed width. Perhaps the better question is what class is the SmugMug logo positioner as I was not able to ascertain it using the web developer plugin in firefox. I am planning on getting rid of the SmugMug header once I get this stuff worked out. My ultimate goal is to make it look as similar as practical to my personal site.

I don't see the div with an id surrounding your navbar. Put it in and I'll help you with the CSS.

Yes, I took the div out and just went with a center tag on the table. Once I get off this plane I will place it in a div.

I have added a div with an id of "BradNavTable"

Originally Posted by BradfordBenn I have added a div with an id of "BradNavTable"

Add this CSS to left-align the navbar on all pages and used fixed width by default (homepage, categories) and go full width on gallery pages:

/* default is 750px wide container, left aligned inside the 750 with the container centered */
#BradNavTable {width: 750px; margin: 0 auto; text-align: left;}

/* on galleries pages, go all the way to left where the breadcrumb is */
.galleryPage #BradNavTable {width: auto; text-align: left;}

Sorry for the delay in response, life got in the way. The div help worked perfectly. Still have some more tweaking to do but getting much better.

Thank you for the help.