Navbar at top of page

My limited knowledge of Zen is causing me to struggle right now as well, so I can't offer too many specifics, but I think I can at least point you in the right direction. First of all, the nav bar is actually defined within the content div, but the header div is not. I believe you'll have to modify page.tpl.php and either move the nav bar out of and above the content div, or move the header down into the the content. It appears that the various regions within the main content div adjust their top margin to accommodate the size of the nav bar, so just be aware that moving most anything will certainly have a ripple effect on everything else.

Believe it or not, this is actually pretty easy to accomplish. Of course there's always more than one way to accomplish things (usually MANY)... but in my experience, you need to change the page.tpl.php as well as your layout.css

The exact answer depends on a few things, such as:
• Exactly where does the navbar need to be located? (above the logo/title and flush at the top -or- paralell to the logo/title on it's right?)
• Do you use search, and do you want the search to appear next to the navbar like the default behavior?

I would be happy to help you with the specific… just tell me a little more about those few things I listed above.

I don't want to completely hijack this thread, but I believe my navbar question is directly on topic. Why is the navbar is floated, setting the margin-right to -100%, and then using the class "with-navbar" to shift everything else down using a margin-top value equal to the height of the navbar?

Naively it seems that the same result could be achieved (navbar on top, everything else lined up immediately below and with the same left edge) by listing the navbar first without being floated (and with 100% width). Everything else would then simply appear below the navbar just as it does now. Perhaps the pure html sequencing is the answer, that all the extra work is simply to make the content div appear first in the html before the navbar (for search engine optimization). Is this all just for that, or is there some other purpose which I simply haven't (yet) been able to figure out?

Thanks in advance.

Naively it seems that the same result could be achieved (navbar on top, everything else lined up immediately below and with the same left edge) by listing the navbar first without being floated (and with 100% width).

The same visual result would be achieved by doing that. But from an SEO and/or accessibility standpoint, having the content first is better.

But you are more than welcome to copy the page.tpl.php to your sub-theme, move the navbar above #main. and remove the "with-navbar" class.

In about 90% of the themes I create, I have to tweak the page.tpl.php file in my sub-theme.

Yep, that should work.

neat solution, thx - appreciated :)

This I belive is the code for Zen 2.0

1. Move the #navigation container outside the #main-inner container into the #page container to become siblings with the #header, #main-wrapper, and #footer containers.
2. Remove the "with-navbar" class from the #main container.
3. Impliment this css.

#main-wrapper, #header, #footer{
float: left; /* Float left for FireFox */
//float: none; /* Float none for IE */
width: 100%;
}
#header{
//margin-top: 40px; /* Margin-Top set to navbar height for IE */
padding-top: 40px; /* Padding-Top set to navbar height for FireFox */
//pading-top: 0; /* Reset Padding-Top to 0 for IE */}
#navigation{
display: block;
height: 40px;
position: absolute;
top: 0;
width: 100%;
}
#page{
position: relative;
}