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

  1. databell96
    Posted 3 years 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
    Forum Moderator
    Posted 3 years 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. Michael
    Forum Moderator
    Posted 3 years ago #

    beginner's mistake;

    z-index only works in positioned elements;


    add position:relative; to h1.site-title

  4. databell96
    Posted 3 years 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