Image Overlay
Permalink
I've set up a fairly basic site (http://www.radinicopywriting.com) but I'm having a slight problem.
In the top right corner are parts of the header bar, and the header nav bar.
The header bar contains the phone number image as well as the 'Get a quote' image.
The header nav has 4 social media icons on the right, which link to various other sites.
The problem I'm having is that the images in the header nav bar are overlapping the imges in the headerbar. Not visually, but they're preventing anyone from clicking on the social media icons.
What I'm trying to do is keep the images in the same location but have the 4 social media icons as clickable.
I'm hoping there's some very basic way of fixing this, as I'm not very experienced/knowlegable with these sorts of things. Perhaps there's someway to change the ordering so that the header nav is behind the header bar?
Any help is very much appreciated, and thank you in advance.
In the top right corner are parts of the header bar, and the header nav bar.
The header bar contains the phone number image as well as the 'Get a quote' image.
The header nav has 4 social media icons on the right, which link to various other sites.
The problem I'm having is that the images in the header nav bar are overlapping the imges in the headerbar. Not visually, but they're preventing anyone from clicking on the social media icons.
What I'm trying to do is keep the images in the same location but have the 4 social media icons as clickable.
I'm hoping there's some very basic way of fixing this, as I'm not very experienced/knowlegable with these sorts of things. Perhaps there's someway to change the ordering so that the header nav is behind the header bar?
Any help is very much appreciated, and thank you in advance.
Or just set the div container for the 4 icons to have a z-index: 99 only just realised what you meant in your post sorry
Thanks for the replies; I'm a total beginner with all, this, how can I add the z-index? Can I do it through the css section under design? I can't click on the images as they're behind an 'add to section' in edit mode.
How do you know that it is the image issues from above?
When looking at your site's page source, it seems to be more the css issue, then it is overlapping. Your image height for the phone number is 40, and the rss and twitter work at the very botttom of the image. the link in does not at all, which leads me to believe its your css doing something.
When looking at your site's page source, it seems to be more the css issue, then it is overlapping. Your image height for the phone number is 40, and the rss and twitter work at the very botttom of the image. the link in does not at all, which leads me to believe its your css doing something.
I really don't know what it is that's causing it. The Linkd image doesn't link to anything yet.
The reason I thought it'd be some sort of overlap is because the very bottom of the image works, as you say. If you have any suggestions as to how to fix this, I'd be very grateful
The reason I thought it'd be some sort of overlap is because the very bottom of the image works, as you say. If you have any suggestions as to how to fix this, I'd be very grateful
I couldn't get the site to load originally. In the theme folder you'll find a css file. If the add to box is over lapping use the php snippet I posted above and place it in your template file just before the offending block
I gave it a go... but it didn't seem to work. It may be because I've put it in the wrong place. Is thre any chance you can tell me which file I need to edit, or what I need to do on the on-site editor?
You can add this code to your template file in between the header and nav blocks.