Image set to position: absolute won't show up

HTML & CSS
1

I’m building a wordpress site with the theme Minimaze. I have been editing the CSS to try and make my logo overlap the slider, but not stay on-screen when scrolling down like it would if it was position: fixed. I want it to look like this, but when i scroll down i want the logo to stay at the top / not scroll down too.

2168×1152 1.3 MB

But you can see at the moment that with position absolute the logo disappears: troide.co
That is with this code:

.site-description {
	color: #777777;
	font-size: 13px;
	line-height: 13px;
}
#logo a {
	display: inline-block;
}
#logo {
	float: left;
	text-align:center;
	margin: 10px 0 0;
        position: relative;
}
#logo img {
	/*max-height: 100px;*/
        display: block;
	margin: 0 auto;
       
        position: absolute;
        z-index: 120
}
#logo h1 {
	font-size: 22px;
	font-weight: bold;
	margin-top: 5px;
}

Any answers would be appreciated!

2

The logo is floated so it has no width or height and all images have been set to have a max-width of 100% which means that the logo will be zero width and height as 100% of zero is zero.

Add this:

#logo img {max-width:none}

3 Likes
3

cheers man, problem solved:DD

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.