Change location of Header and Navigation Bar

KennyVanLent's picture

Greetings Zen Task Force,

Below there are two images, one how it is and one how it should be. (Images attached)

All the changes have been done in "layout-fixed.css", is this ok? (Document attached)

Could someone help me with the changes as in the image please?

Howitis.png188.39 KB
Howitshouldbe.png220.65 KB
layout-fixed.txt8.14 KB


Changing Locations

AaronCollier's picture

If you want to change the location of things like the navigation menu, you shouldn't be working only in CSS, but also in the theme and block settings. The theme settings set breadcrumbs, and the block settings fix which menus appear where.

i want to change the position

barraponto's picture

i want to change the position of both these items, but i don't want to change the html.
as jjeff said: touching the html is like peeling the rubik colors off.

let's solve this puzzle.

Positioning elements

ecvandenberg's picture

Hi Kenny,

You can position HTML elements anywhere you want by just using CSS. You already use the 'relative' property in combination with 'top' or 'left' or whatever. You can also use the 'absolute' and 'fixed' property. And with negative margins you can also move elements over other elements.

If you want to move the logo, you should look in the page.css file. There you find the styling for the Logo. Just play with the positioning until your logo is where you want it to be.

Zen has deliberately separate stylesheets for different parts of your web design. Each file explains in the header what type of elements you should style in that particular stylesheet. But this is only for your own benefit to keep overview. In the end it does not matter where you style an element. All stylesheets collapse when you switch your site to production.

Good luck.

BE the change you want to see in the world

From what I've found, he

Jeremy Toaster's picture

From what I've found, he needs to edit page.tpl.php for some things and really dig and manipulate the CSS. There are SO MANY factors that are inherited and overwritten when you are creating a Zen SUB THEME. And what I find very frustrating, is that no one actually answers anyone's questions anywhere. Everything is so very vague. People ask specific questions and get general answers. There are tons of "tutorials" on how to "set-up" a Sub Theme, which is really all just renaming files and stuff. But no one actually walks through pointing to exact lines of code and pages that need editing to help someone's very specific issues out.
I'm in the same boat as this guy. I've been working in web design since 1998 and still this stuff is more complicated than it should be.
Sorry this isn't helping him in anyway. Basically he just needs to dig and dig, trial and error, delete, refresh, copy paste, save, refresh. Do some internet searching, take pieces from what he can find, and hope it all turns out the way he wants it to.


JocelynIresonPaine's picture

It's really good to see someone else say this. I note "Peters"' comment on a guide to creating a sub-theme:

I am astonished on this topic!

It seems that everybody knows something but nobody knows exactly!

I am trying to sub theme CorpClean and did all what was suggested but was unable to make it work.

This should be something "easy" but with all different and conflicting information it's becoming a nightmare!!!

I am having much the same difficulty trying to customise a sub-theme of the Venture theme. I'm having to dig into its stylesheets and templates, and play around with page-source inspectors in my browser, in order to reposition some elements that Venture chose not to implement as blocks.

But reading the code and trying to infer what it does should never be necessary. As one computer scientist said, "Code only tells you how your software does behave, not how it was intended to behave." Venture's authors ought to have written a specification of the theme. This would include a list of the HTML elements that can be moved without breaking the theme, the IDs or classes by which CSS refers to them, and the kinds of styling that can be applied to them without breaking the theme.

I'm not criticising Venture itself, but the fact that its authors don't specify their product. But they're not unique. It seems to me that nor do many other Drupal developers. Proper program specification is very important, but how does one persuade people of this? I recommend an article called Software Design: a Parable by computer scientist Tony Hoare. It shows how, without proper documentation, using software degenerates into spellcasting.

JocelynIresonPaine's picture

Here's a quote from that Hoare article. The emboldening is mine.

I have recently attempted to study a slim volume from the library provided by one manufacturer. It was rather over a hundred pages of close type. At the beginning, it frankly told me that an understanding of the text would depend on prior familiarity with three other volumes not available to me. It also admitted that the practical application of the knowledge contained therein would depend on a knowledge of some other volumes, depending on the size and nature of my computer and its software configuration.

Nevertheless, I persevered in my study of this single volume. I found in it some extremely well written and well presented case studies of several example problems which could be solved with the aid of particular incantations displayed therein. Indeed, I had a very strong impression that I had understood the methods described, until I tried to apply them to a new and different example problem of my own. Then I realised that I had no knowledge of the actual capabilities of the software described — what was the range and limits of its adaptability. In fact, the only way of solving the new problem was to try to copy the incantations carefully from the manual, making as few adaptations as possible to meet the needs of the new problem. Naturally, this involved a great deal of guesswork, since there was no way of finding in advance whether the changes would have the desired effect, or indeed, whether they would be acceptable to the deity at all.

This is what I did

kafmil's picture

I know this is an old post, but this is partly in answer to Jeremy's post. I also get annoyed at people who obviously know the answer but just write in vague statements about how much more they know rather than answering the question.

I found this article pretty handy . I am also not an expert, just learning as I go so if you want to correct me pelase go ahead, and please be specific there are enough vague statements in here already.

My issue was in the new zen theme, the menu was appearing right at the top of the screen because of this:

#navigation {
    position: absolute; /* this puts it to the top of the page not the top of the containing div
    top: 0; /* Zen theme comment says: Move the navbar up inside #main's padding. /
    height: 3em;
    width: 100%;

I changed it to float both the content and navigation sections left and then moved the content section down by the height of the navigation section:
#navigation {
float: left;
width: 100%;
margin-left: 0;
margin-right: -100%; / this and the width are pushing the content section down /
padding: 0;
height: 3em;

#content {
  float: left;
width: 1200px;
margin-left: 0;
margin-right: -1200px;
margin-top: 3em; / moved the content down below the height of the menu */
padding: 0;

I hope this helps somebody out there.

Thank you

ivnm's picture


Thank you for solving this problem. It really helped.
Btw, I'm just a beginner on html/php/css, but I see that the main content is placed before the navigation bar in the page.tpl.php file.
So I switched the order, like this:

<div id="navigation">
     /* navigation bar here */
</div><!-- /#navigation -->

<div id="content" class="column" role="main">
    /* main content here */
</div><!-- /#content -->

Plus removing the "position: absolute" as kafmil said.

Just wanted to know why the template is ordered in this apparent inverted way and if there will be consequences with what I did.

Thank you.

Reason why navigation after content

designarti's picture

Short answer: SEO
Google wants our content to be king. Wants the relevant content to be on top on any other blocks or modules or whatever.
This is the reason navigation stays below content. The H1 comes before everything else. Ok, right after the logo, which can be tweaked as well. But that's just a line. Some people use navigation with tons of lists and sublists, navs and subnavs, dropdowns etc. And that could be huge info before our dynamic content. And that goes to "-" SEO points.
A short remark
Consider the navigation below the content like we use to insert our analytics code after it. Analytics js in head makes the website load after it. And that goes to "-" SEO points as well.
Hope that helped someone in rearranging layouts.

I'd like to point out that in

ooXei1sh's picture

I'd like to point out that in almost all cases when designing a responsive site the navigation markup will have to be moved above the header and positioned relatively anyway. So this layout decision based on SEO needs may be a bad idea as a default page setup. Just my opinion.