-
Posts
-
Hi,
I want to move an image so that it overlaps into the next box. So far, I used margins to move the image but now the image part which is overlapping isn’t show in the next box. My guess is it has to do with z-index but not having luck changing it.
Hey mclweb,
I only get a login prompt on the page you linked to, please provide details so that we can see the page in question. Also, if you have a screenshot or mockup highlighting your intentions then please link to that as well.
Best regards,
RikardOf course…my bad…wasn’t thinking there. Login info attached. How do I add a screenshot? You can see the full logo up top and then the logo in the slider below. I’m trying to get the bottom part of the logo (tail of the M, N and A) to hang over.
Hi mclweb,
Which part of the page are you trying to move out here?
Could you please attach a mockup of what you’re trying to achieve?
Best regards,
VictoriaHere are links to what I have now and what I want. Basically I’m trying to have the slider caption (large logo) drop below the slider image into the next div. I’ve got it moved down (negative margins) but it is hidden behind the next div not on top of the next div.
Hi mclweb,
Thank you. I tried to play with the z-index value but I could not get it to work. Maybe the image should be placed in the section below and pulled up with css.
Best regards,
VictoriaHi Victoria,
I was able to get overlapping by adding the logo as an image below, giving the image an ID and then using z-index, position:relative and margin to move it up. That is all good.
But, when I go to replicate that using the logo in the header and try to move it down. No luck. So, I’m trying to move the logo (bottom part) below the header into the image below.
I have this which is allowing me to move the logo with the margin but the z-index isn’t having any effect.
.logo img
{
margin: 15px !important;
z-index: 99999999 !important;
position:relative;
}I read in support that I must add an ID tag to the image. I don’t know how to add an ID to the logo within the header. Do I need an ID tag on the logo? If so how can I add one when the logo is added through Theme Options.
Sarah
Hi Victoria,
This is for a different site (same company). Image attached.
The logo need to move down from the header so the “tails” of the “m”, “n”, “a” dip into the image below. I can move it down with margins, but when I do the tails are behind the lower image.
Thanks for your help.
Hi,
Sorry for the late reply, I have taken a look at your pages and it looks like /monova2/ is correct now, but your screenshot to the other site is not but we don’t have a link to it, only a screenshot.
Please include a link to the other site.Best regards,
MikeAttached is the logo information for the second site.
So, I just need to tails of the logo to overlap into the image below.
Haven’t heard from anyone on this in a couple of days. Any luck with overlapping the logo into the image box? Hard to believe I’m the only person who wants their logo to dip down.
Hi mclweb,
We apologize for the delayed response.
I tried the login but it doesn’t work.
The answer to your issue is most likely changing the z-index value.Best regards,
NikkoHi Nikko,
Yes, we had to shut down the login I gave as we had some unusual activity. I trying to set you up as a user but having problems due to security controls.
I have played with z-index as has Victoria. It works for an image in other parts of the site but not for the logo in the header.
I’ll send credentials soon but is it possible to test it there and let me know if you’re able to move a logo outside of the header?Thanks,
Sarah
Hi,
Thank you for the login, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:span.logo,span.logo a { overflow: visible !important; z-index: 99; position: relative; }This should allow the logo “tails” to hang down over the image.
Best regards,
Mike
- The topic ‘Moving image out of a div’ is closed to new replies.