Overhang Logo Needs Responsive help

[eamonmoriarty]

I managed to create a logo which overhangs the navbar following discussions on this post: http://www.studiopress.community/topic/overhang-logo and it looks OK at full size. But it needs some responsive CSS to make it work properly at browser sizes of 480 or less.
The problem is that the Right Header Widget Area does not drop below the Left Header Widget Area and just goes behind, creating a mess.
Development site can be seen at http://kerryladies.ciarraiabu.com
I'm trying to find what changes to media queries are needed to get this to work properly.
Any help appreciated.

---

Eamon Moriarty
EM Dzine

[Sridhar Katakam]

Add this CSS:

@media only screen and (max-width: 671px) {

	.header-left {
		position: static;
		float: none !important;
		margin: 0 auto;
	}

	.header-right {
		float: none !important;
		width: auto !important;
		text-align: center !important;
	}

	.header-right .alignright {
		float: none;
	}
	
	.genesis-nav-menu {
		padding-left: 0;
	}

}

to get

---

Genesis Tutorials | Follow me on Twitter

[eamonmoriarty]

Sridhar Katakam, many thanks, that is just what I was looking for.

---

Eamon Moriarty
EM Dzine

[Author]

Posts