Zen sub-theme navbar-inner problem

Hi Rothbert,
I can't be much help other than to say that I'm having similar problems with navbar-inner not behaving as it should be (or how I think it should be), same version of Zen. My understanding is that the use of 'inners' is to make spacing work more predicatably across browsers (especially dealing with padding problems in IE). Is there anyone out there who could give some more information on this one? Possible work arounds? Or more on the how inners work?
Many thanks,
Matt

Hi Rothbert,
I think this has to do with the "Body Politic" setup of Zen, the content is placed before the navbar for SEO. I am finding that adding margins to the bottom of either navbar-inner or navbar has no effect on the content (editing either layout.css or mysite.css.
Not sure if it helps but might help you look in the right place.
Good luck and if you do find any solutions don't forgot to post them!
Cheers
Matt

I am experiencing the same issue, I find that adding bottom margins or padding in navbar-inner makes no impact on the content, I have found the same with editing #navbar (I know i'm not meant to do that but was just trying to work out what was going on. Is this to do with the navbar appearing after the content in the code? It would be great if this issue could be fixed for 1.0 final. Also what I find frustrating in Zen is the inability to add anything to the appear horizontally beneath the navbar but above the content and side bar. Would it be possible to put a wrapper around the content and sidebar, but not include the navbar? I've been playing around with it without success, forgive me if I'm misunderstanding I'm new to theming.
Keep up the great work!
Matt

[Later: edited this comment to remove my mistaken notes about #navbar as absolutely positioned.]

I've only recently begun working with zen, but I may be able to shed a bit of light on one or two issues here.

Rothbert: I don't know why your #navbar-inner is floating above your #navbar. It would be easier to figure out if there were a sample page. On my several installs of zen 6.x-1.0-beta2 on Drupal 6.4 on both IIS and Apache, the default navbar is positioned correctly. I would check to make sure that you haven't inadvertently inserted some extra CSS somewhere along the line.

durruti: If you want to add something beneath the navbar but above your content and sidebars, then I can think of a couple different strategies, but they all involve a bit of editing of page.tpl.php.

1. One thing to try would be to create a new "region". Once you create a new region then you could edit page.tpl.php in order to place that region below (inside) #main and #main-inner, but above #content and #content-inner. To make the new region work, you will need to move the top-margin settings from #content over to #new-region, since then your #new-region will need to leave a blank margin area above itself for the #navbar to fit into. And you may need to fiddle with its width and margin-left and margin-right settings a bit in order to make sure that all the other content divs will drop down below it properly and still maintain the zen 3-column style. This strategy is similar to what you would achieve by wrapping an extra div or two around the #content divs, but by using a "region", you will be better able to customize how and when it appears on different pages without having to continually edit the page.tpl.php page.

2. Another option would be to edit the page.tpl.php template page and move the #navbar out of the #main and put it into the bottom of the #header div instead. Then get rid of the #navbar layout styles and create a simple width: 100% style without extra left or right-margins. And then you could create a new region for your special content. You will lose your content-first code order, but you would have an easier time inserting your new region between the #header and the #main divs without worrying about fiddling with widths/margins.

3. A final option would be to edit the page.tpl.php template page and move your sidebar _inside_ the #content div. You would need to rework the layout considerably to make this work: you would need to transpose the entire set of layout styles over to a different set of #divs to recreate your 3-column structure _inside_ the #content div itself, but if you managed to do that successfully, then you could just drop things into the #content-top region whenever you wanted them to be above everything else. This strategy is actually alot like number 1. above, but it comes at it from a different direction.

There may be a simpler, more obvious solution for what you want to do, but those are the strategies that came to mind first for me.

Phil.

Hi Rothbert,

is the problem your describing due to the #navbar li, links being floated and so being taken out of the flow of the document?

Try changing layout.css (line 215) "float:left;" to "float:none;" and see if that helps.

Best, Jon

Phil: Thank's so much for taking the time to give such a detailed and useful reply. I'm still working on it to work out what would be the best solution for me. I had changed strategy slightly to go around the problem, but now it raises itself again, so I'm working through your various solutions, initially having tried out option#2, I now feel that option 1 will give me greater flexibility. Anyway just wanted to say thanks, it is posts like yours that make the drupal community so vibrant.
Cheers
Matt

hi, mostly avoid use in her now the bar dear when using the same thing but I am working on a site where we'll be heating it to our at your site?

Marcus, are you okay? Your last message is pretty garbled.

@Robert: floated elements, by definition, can extend past the bottom edge of their parent container. Its in the CSS spec. If you want to prevent that, you could add a "clear-block" class to #navbar-inner. min-height on #navbar-inner would also work (and if you needed IE6 support, you would also need to add a _height on #navbar-inner in the ie.css file.)

Yes thanks John sorry about the garbled message I am dyslexic and tried to write it out by hand instead of using by dictation software.

I am also feeling the navbar pain - I'd like to use zen and sub themes to do all my theming, but am now contemplating punting off of zen in favor of deconstructing zen into a new base theme that I could then modify as needed going forward.

I love zen's features, but there are some frustrating problems with it.

Turning on all the wireframes to see all the divs - breaks the entire layout (see all_wire_frames.jpg). And just changing the width of page actually causes even more problems (all of it seems to be a problem with how navbar and the sidebars are printed)

So if you do something like so in wireframes.css:

.with-wireframes #body,
.with-wireframes #page,
.with-wireframes #page-inner,
.with-wireframes #header,
.with-wireframes #header-inner,
.with-wireframes #navigation,
.with-wireframes #navigation-top,
.with-wireframes #navbar,
.with-wireframes #navbar-inner,
.with-wireframes #main,
.with-wireframes #main-inner,
.with-wireframes #content,
.with-wireframes #content-inner,
.with-wireframes #content-inner>*,
.with-wireframes #node,
.with-wireframes #node-inner,
.with-wireframes #sidebar-left,
.with-wireframes #sidebar-left-inner,
.with-wireframes #sidebar-right,
.with-wireframes #sidebar-right-inner,
.with-wireframes #footer,
.with-wireframes #footer-inner
{
margin: 2px;
padding: 2px;
border: 1px solid #ccc;
}

.with-wireframes #closure-blocks
{
margin-top: 2px;
padding: 2px;
border: 1px solid #ccc;
}

You get the results in the attached image.

When just leaving wireframe.css alone - primary links are not printed in the navbar-inner, and there are tiny regions of wireframe sections above the primary links - looks like it is navbar-inner and possibly navigation. Anyway I would say that navbar is broken.

I've been messing with layout.css in a zen subtheme for days now trying to get everything to display correctly with wireframes around everything and dropping images into the outer divs so that I can give the raw theme to a designer, but every time I try to fix the navbar I end up messing up the layout, and somehow I end up effect the left-sidebar and the content area....

I am quite frustrated...while I can see the power of zen, what I am realizing here is that since I didn't create it from scratch, trying to "fix" it is becoming a huge time sink for me...and while I appreciate the knowledge I am gleaning - and the huge amount of work that was done in zen - starting from scratch using the zen code as a reference is now becoming a real possibility for me going forward.

I am also just considering re-doing page.tpl.php so that it prints the divs out from top to bottom, you know:

body
page
header
navbar
main
content with sides bars
footer

etc.

At least then I can make sense of how things get layed out - I feel like half the time I change padding or margin in the css expecting it to modify a certain div and it ends up changing the whole layout and has me resizing sidebars and content for hours trying to get it to display cleanly.

(sigh)

here's the problem: you need to apply the "clear-block" class to navbar inner. add it in your page.tpl.php file. chances are you've set your primary navigation links to "float" as opposed to "display:inline" and they're breaking out of the container (in this case, the container is "navbar-inner." if you apply the "clear-block" class, the navbar-inner will stretch around the elements it contains, and everything will be good again.

these seems to be a minor bug with zen. if you look at the other parts of the page in firebug, you'll see that all other divs that contain floating elements (such as "main" "header" etc) have the clear-block class. anyone know how i can go about getting this added to the code for the next release?

I broke down zen into my another basic theme and slowly built up the divs - which solved most of the layout problems - I removed the navbar div and instead use two divs one on top of the other - one for primary links and one for secondary links - for the theme I am doing I only need a right sidebar so I removed all else, including the code that has the node area grow or shink based on sidebars being used or not...the divs for primary and secondary links display in a "man" div that wraps everything below the header div (an above the footer div).

Now that this is working the way I want it too I will probably still use zen, I'll just make a sub-theme that over rides most of the broken stuff in zen, yet still inherents the wonderful CSS, clear cache function, wireframes, etc.

Zen (STARTERKIT) does need a little work though, hope these things are being taken care of - in particular I don't think the navbar div is implemented very well...

I've been tearing my hair out with the same problem. Zen does not seem to rationally distinguish between the navbar and the primary links. You can only render the primary links by rendering the navbar. And I can't find a way to have any control over how the navbar is rendering the primary links.
If there's any zen documentation that clarifies this, please let me know.