Have Menu go behind content area…

[Anonymous]

Here is my website layout, very minimal: http://sometimesyoubreakaclarinet.com/about/

If I wanted the links and logo/banner image to go behind the gray content when the resolution is less than a certain width, how would I do that? Right now that text and image end up going ontop of the content and that’s not what I want. Eventually I’ll have to design an alternate layout for iphone/mobile but maybe for now there’s a simpler option.

[chrisburton]

Why would you want to hide your menu? That would result in people not being able to navigate your site.

[raajtram]

You’ll have to go responsive (add the media queries). When you say ‘on top’, do you mean the logo and menu overlap on the content?

-Raaj

[hotpink]

@aarongmore

I understand what you want. And as you say, you will need to create an alternate layout.

For now, this code will achieve what you want. Add this to your css.

.aside {
z-index: 100;
position: relative;
}

.bside {
z-index: 200;
position: relative;
}

The z-index property controls the depth level that elements should be displayed. The higher the number is displayed on top.

As far as I know, z-index only applies to elements that have a position defined, in this case position: relative.

[Anonymous]

> When you say ‘on top’, do you mean the logo and menu overlap on the content?

@raajtram yes, the logo and menue seem to overlap the content if the browser width becomes to small; this makes the content rather difficult to read.

Creating an alternate layout sounds like the way to go. I haven’t attempted media queries and such before. Now to figure that out…

[Author]

Posts