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.


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.