Site logo

Archived topic

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

3 replies · Started by Paul on September 26, 2015

Viewing posts 1–4 of 4

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:

logo in menu plus

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.

What if you use this CSS instead?:

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

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

Cheers!

Awesome! :)

This archived topic is closed to new replies.