Remove Menu & Center Logo On 1 Page

[drumminlogan]

I’m trying to create a page where the menu is removed from that specific page and the logo is centered in the header.

I’m not able to get it right. It looks fine full screen but when it’s resized the mobile menu is still there and the logo moves back over to the right.

Here is the custom CSS I’m using. Any suggestions?

.page-id-22 .header-right {display: none;}
.page-id-22 #logo {margin: auto; position: relative; text-align: center;}
.page-id-22 #logo img.standard {display: inline;}
.page-id-22 #logo a.mobile-menu-show {display: none;}

You can see the page at http://blogaboutcider.com/about-2/

[Tahir – SUPPORT]

Hi,
Make following amendments.

.page-id-22 .header-right {
display: none !important;
}

#logo a {
float: none !important;
}

Thanks
Tahir

[drumminlogan]

Thanks, that worked great. One other thing, the logo gets squished when viewed on a mobile device. The logo gets resized to 200px wide, but height stays the same. What do I need to change to make it appear right.

Thanks

[Swift Ideas – Ed]

Hi there,

I’ve added in some css to fix this in future updates. For now, you can add this custom css:

@media only screen and (max-width: 479px) {
	#logo img, #logo img.retina {
		height: auto!important;
	}
}

Hope that helps.

– Ed