• 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 not working on front-page-1 Studio Pro theme

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 › Design Tips and Tricks › Z-index not working on front-page-1 Studio Pro theme

This topic is: resolved
  • This topic has 3 replies, 2 voices, and was last updated 3 years, 9 months ago by Marijn.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 12, 2019 at 9:57 am #490624
    Marijn
    Member

    I'm trying to get a widget area to show half overlapping front-page-1 but I can't get the widget to show on top of front-page-1. Tried multiple z-index settings but nothing happens.

    I'm using studio pro theme, newest version.

    Other widget area's like front-page-4 and -5 are working but front-page-1 isn't.

    Any help is much appreciated as I 'm stuck here 🙁

    Thanks in advance

    https://liposomahealth.com/new/
    April 12, 2019 at 11:07 am #490628
    Victor Font
    Moderator

    What widget do you want to overlap what content in front-page-1. You front-page-1 has a custom header, a wrap, and 2 widgets within the wrap. You have to be more specific with what you want if anyone is going to help you.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    April 12, 2019 at 11:42 am #490631
    Marijn
    Member

    Alright, sorry.

    I want the image inside this widget (liposoma-technology-1):

    <div class="liposoma-technology-1 widget-area" id="liposoma-technology-1">
    <div class="wrap">
    <section id="custom_html-12" class="widget_text widget widget_custom_html">
    <div class="widget_text widget-wrap">
    <div class="textwidget custom-html-widget">
    <div class="liposomen-image"><img src="/new/wp-content/uploads/2019/04/liposomen.png" alt="Liposomes" scale="0">
    </div>

    to overlap front-page-1, there are no widgets at the bottom so it seems to me that .front-page-1.hero-section needs to be adjusted but I can't get it to work:

    <div class="front-page-1 hero-section" role="banner">
    <div id="wp-custom-header" class="wp-custom-header">
    <img src="/uploads/2019/04/cropped-technology-bg.jpg" width="1500" height="784" alt="Technology</div>
    <div class="wrap">
    <section id="custom_html-3" class="widget_text widget widget_custom_html">
    <div class="widget_text widget-wrap">
    <div class="textwidget custom-html-widget">
    <h2>text</h2>
    <h4>text</h4>
    <a href="#second"><i class="fas fa-angle-down"></i></a></div></div></section>
    <section id="custom_html-7" class="widget_text widget widget_custom_html"><div class="widget_text widget-wrap"><div class="textwidget custom-html-widget"><div class="usp" id="second">
    <div class="container">
    <div class="left first">
    <img src="/uploads/2019/04/liposomal-formulas.png" alt="experience" class="icons-usp">
    </div>
    <div class="right">
    <p>text</p>
    </div>
    <div class="more"><a href="#front-page-5"><i class="fas fa-chevron-down"></i></a></div>
    </div>
    
    <div class="container">
    <div class="left first">
    <img src="/uploads/2019/04/network.png" alt="Knowledge" class="icons-usp">
    </div>
    <div class="right"><p>text</p></div>
    <div class="more"><i class="fas fa-plus"></i></div>
    </div>
    
    <div class="container">
    <div class="left first">
    <img src="/uploads/2019/04/customers.png" alt="Customers" class="icons-usp">
    </div>
    <div class="right">
    <p>text</p>
    </div>
    <div class="more"><a href="#front-page-6"><i class="fas fa-chevron-down"></i></a></div>
    </div>
    
    <div class="container">
    <div class="left first">
    <p>text</p>
    </div>
    <div class="right">
    <p>text</p></div>
    <div class="more"><i class="fas fa-plus"></i></div>
    </div>
    </div></div></div></section>
    </div></div>
    April 12, 2019 at 11:57 am #490632
    Marijn
    Member

    Sorry again.. 🙂 fixed it. Overflow hidden was the issue. Thanks

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Z-index not working on front-page-1 Studio Pro theme’ 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