Grow your CSS skills. Land your dream job.

Have Menu go behind content area…

  • Anonymous
    # April 14, 2013 at 5:09 am

    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.

    # April 14, 2013 at 5:33 am

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

    # April 14, 2013 at 12:50 pm

    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

    # April 14, 2013 at 4:21 pm

    @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
    # April 17, 2013 at 5:48 am

    > 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…

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".