Support » Plugin: Draw Attention » Draw Attention On Top of Menus

  • Resolved mmyers821

    (@mmyers821)


    When using a drop down menu which is above the Draw Attention image, the image is on top of the menu so that the menu cannot be seen. I’ve disabled Draw Attention and replaced the hotspot image with a plain image. I can revert to the Draw Attention image if someone wants to take a look. -Mark

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Contributor Natalie MacLees

    (@nataliemac)

    Hello @mmyers821,

    I’m sorry that you’re having trouble. Could you please set up a test page with a Draw Attention image so we can take a look at what’s going on when you have a Draw Attention image on the page? It’s tough for us to troubleshoot an issue that we can’t see.

    Hi,
    Thanks for the response, and yes – I sure can. Go to https://safegrain.com/?page_id=2226.

    To test, in the menu go to PRODUCTS > AERATION.

    The Aeration menu has twelve items. When opened, the menu drops behind the image so that only four choices are displayed.

    This occurred on other menus as well until I reorganized them to make them shorter. When the aeration menu was still too long, I removed the Draw Attention image from the home page and (hopefully temporarily) replaced it with a static image.

    Your help is greatly appreciated. -Mark

    Plugin Contributor Natalie MacLees

    (@nataliemac)

    Hello @mmyers821,

    Thank you for setting up the test page. I was able to dig into your theme CSS and find the issue. Your navigation has an unexpectedly low z-index, so if we just bmp that a bit, the menus will display over the Draw Attention image without an issue. Here’s the CSS to add to your site:

    @media screen and (min-width: 48em) {
    	body .navigation-top {
    		z-index: 450;
    	}
    }

    We have an article on adding custom CSS here: https://wpdrawattention.com/document/customizing-draw-attention-css/

    Let us know if you need any more help with this.

    This worked perfectly. I followed the instructions in the article, and elected to add the Simple Custom CSS plugin. Using the plugin, I added the CSS code above to the site, then restored the Draw Attention image shortcode previously used on my home page. Now the menus drop down over the Draw Attention image instead of behind it.

    Great job Natalie MacLees! -Mark

    Plugin Contributor Natalie MacLees

    (@nataliemac)

    Great, I’m glad that worked.

    Just let us know if you need anything else.

    I am having a similar issue whereas the dropdown menu items in the main nav appear as semi transparent behind the Draw Attention image. Here is a link to the site: http://wv9.646.myftpupload.com

    as well as a link to the preview: http://wv9.646.myftpupload.com/?da_image=3885&preview=true

    in case it has been replaced with a staic image when you visit. Thanks.

    I have set up a test page: http://wv9.646.myftpupload.com/test/

    Please hover over the “Who We Are” and “Media” tabs to see the issue. Thanks

    Plugin Contributor Natalie MacLees

    (@nataliemac)

    Hello @heybill,

    We have an update coming out soon that adjusts our Draw Attention CSS a bit to be compatible with more themes with sticky headers, but in the meantime, you should be able to add this CSS to your site:

    body .hotspots-container {
        z-index: 0;
    }

    to get this working as expected. Instructions for adding custom CSS are earlier n this thread.

    Let us know if you need anything else.

    Thanks Natalie – that worked perfect!
    http://wv9.646.myftpupload.com

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Draw Attention On Top of Menus’ is closed to new replies.