• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Z-index

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › General Discussion › Z-index

This topic is: resolved

Tagged: z-index

  • This topic has 6 replies, 4 voices, and was last updated 7 years, 11 months ago by briansteeleca.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 28, 2014 at 11:07 pm #126109
    Kevin
    Member

    This is driving me crazy. I am trying to get a logo to stack over the menu. Link to site. I created two widget areas for the header. One is for the log and has a z-index of 9999. The navigation area (.nav-primary) has a z-index of 2 but the logo still stacks behind it. I've tried adding z-index to everything I could but nothing works

    September 28, 2014 at 11:46 pm #126111
    Brad Dalton
    Participant

    Have you tried a negative margin?


    Tutorials for StudioPress Themes.

    September 30, 2014 at 3:44 am #126240
    Kevin
    Member

    yes, I've tried everything that I can think of. For some reason, the blue background from the nav-primary will not go behind the logo no matter how I set the z-index.

    September 30, 2014 at 6:22 am #126254
    briansteeleca
    Member

    One thing to keep in mind when you're using z-index is that the element with z-index must have positioning to work. Most of the time you can just add position: relative to make it work.

    On your site, the stacking order looks correct now, but your .logo div needs background-color: #fff if you don't want the navigation bar to show through.

    September 30, 2014 at 2:41 pm #126343
    Kevin
    Member

    You are a lifesaver. Thank you! I would have never figured that out. I knew I had the stacking order correct but couldn't determine why the logo was getting cut off. Thanks again.

    April 12, 2015 at 5:43 pm #147656
    EZEarache
    Member

    Thanks Brian,

    Position Relative Saved My Night also!

    April 12, 2015 at 6:18 pm #147659
    briansteeleca
    Member

    Cool, thanks for mentioning that EZEarache, it made my night even better. ☺

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Z-index’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble