WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [Theme: Twenty Twelve] Getting hgroup z-index over main-navigation (4 posts)

  1. databell96
    Member
    Posted 1 year ago #

    This really could apply to any theme but I've done this before and usually it works. With Twenty Twelve, it doesn't seem to work.

    I'm doing this new theme built on Twenty Twelve and I'm using the hgroup to display a logo for the site and I want the main-navigation nav to appear beneath the logo and right now, it's in front of it. I've tried numerous z-index tricks in my CSS. Nothing seems to change.

    The theme is here and if anyone has a suggestion to get the logo to appear over the nav, let me know.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    The logo image is a background image, so for z-index to work, you need to use a negative value on it. Also, z-index requires a position attribute. So try this:

    .main-navigation {
       z-index: -5;
       position: relative;
    }
  3. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

    beginner's mistake;

    z-index only works in positioned elements;

    http://www.w3schools.com/cssref/pr_pos_z-index.asp

    add position:relative; to h1.site-title

  4. databell96
    Member
    Posted 1 year ago #

    Ah, yes! That's much better. Thanks for the advice, Alchymyth!

Topic Closed

This topic has been closed to new replies.

About this Topic