[Resolved] Logo with z-index in Menu Plus covered by Blog entries in Masonry view

[Paul]

Hi Tom,

I set an oversized logo within Menu Plus with a z-index so that it can float “over the top” of the main navigation and extend just below it into the content area. This is the CSS I used:

.main-navigation .sticky-logo img {
	height: 160px;
	z-index: 999999;
}

This works fine on all pages and individual posts, but when I go to the Blog page (set to Masonry layout), the bottom third of the logo is obscured by the content in the main area. See screenshot:

I’ve noted in my code inspector that .masonry-container is set to overflow:visible but I cannot seem to override this even when using !important

.masonry-container {
	overflow: visible !important;
}

In addition to this, I’ve tried adding overflow: visible in my browsers code editor to all masonry related classes that might be affecting this part of the page with no success. Any idea on how to fix this?

P.S. I am building the site on localhost, so cannot provide you with direct access to the site, unfortunately.

[Tom]

What if you use this CSS instead?:

.main-navigation .sticky-logo img {
	height: 160px;
	z-index: 999999;
	position: relative;
}

[Paul]

That did the trick. Position! How did I miss that?

Cheers!

[Tom]

Awesome! 🙂

[Author]

Posts