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
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
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
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
