• 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

Metro Pro theme Widget Icon Link dies at 1000px width

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 › Metro Pro theme Widget Icon Link dies at 1000px width

This topic is: not resolved

Tagged: Icons, links, widget

  • This topic has 4 replies, 2 voices, and was last updated 6 years, 1 month ago by bearthedog.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 25, 2017 at 1:35 pm #200021
    bearthedog
    Member

    Hi,
    I placed an icon in an image widget in the "Header Right Area" with a link to whitehouse.gov. It works on the desktop but when it reaches approx. a width of 1000px the link is no longer available. This continues down to the smallest mobile sizes. The image is the American flag in the top right corner of the website. Have only a CSS margin adjustment, tried deactivating it and still NG. Also tried link with and without http:// and w/&w/o www. still NG.
    Thanks for any help.

    http://forbloggingoutloud.com
    January 25, 2017 at 2:03 pm #200024
    Victor Font
    Moderator

    What's happening is that the link is hidden behind the padding for the title area. The two areas are crashing into each other and the link is behind the title. If you want to keep the link available, you have to move it higher up in the z-index. Here's the CSS.

    .widget_sp_image-image-link {
        position: relative;
        z-index: 10;
    }

    Regards,

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

    January 25, 2017 at 7:43 pm #200034
    bearthedog
    Member

    Hi Victor,
    Thanks so much for answering, however it doesn't seem to work. I raised the z-index up to 10000 still NG.
    I tried a different selector and variations, Any other thoughts?

    January 28, 2017 at 11:46 am #200186
    Victor Font
    Moderator

    Make sure you clear all caches and hold shift down while reloading the page. This code works. I tested it with your site on http://semalt.design/. If you are using a mobile device, you have to physically clear the browser cache. Mobile phones are notorious for not updating style sheets.


    Regards,

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

    January 29, 2017 at 8:41 am #200218
    bearthedog
    Member

    Hi Victor,
    I tried what you suggested however it still is not working. Currently the code is:
    .widget_sp_image-image-link {
    position: relative !important;
    z-index: 10000 !important;
    }
    ----------------I also tried this:
    section#widget_sp_image-12.widget.widget_sp_image /*.widget_sp_image-image-link*/ {
    position: relative !important;
    z-index: 100000 !important;
    }

    I also tried it at semalt and even there it doesn't work.
    I have tried it on numerous browsers. Using various responsive tools as in Safari, Firefox,
    Chrome and Opera.
    I can't recreate it but I could swear in Opera when I was in developer tools on the 800x600
    size I thought it worked but when I tried again it didn't, maybe it was wishful thinking.
    Very frustrating.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘General Discussion’ is closed to new topics and 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