Altitude Theme – Header Image

[nhlennox]

I'm having trouble getting my header image to work on web and mobile. The pixel size is 360 x 76. On the web, I want the logo to be flush with the left side of the page, but when I do that, it is not centered in the 360 x 76 size space and on mobile, it is way too left and not centered. It seems to work fine in the demo. Any suggestions?

http://www.greenbanc.com

[nhlennox]

Also, the image is larger on the first page and then scrolling makes it smaller. Ideally, I'd like the smaller image to be maintained throughout. Centered for mobile.

[Jonathan]

The Altitude theme demo is setup using site header text instead of a header image. If you logo font is a web based font, you can use the site header text and change the font family, or I've used the following to left-align the header image and center on mobile:
Create a header image at 360 x 76 and center the logo in the image file.
For desktops use a negative left margin to left align the logo:

.header-image .site-title > a {
    margin: 0px 0px 0px -50px;
}

For mobile devices, remove the negative margin in the media query
Add the following to the header image css class:

@media only screen and (max-width: 1023px)
	.header-image .site-title > a {
		background-position: center !important;
		margin: 0;
	}

This is one way to achieve the left-align and centered header image look. Another option is to change the header image size in the theme function file and then align the image as needed using media queries.

Altitude changes the header size when scrolling by appending the css class with .dark. You can modify the .header-image .site-title > a height to 56px to match the scrolling height. You'll need to add padding to the .site-title class as needed to fix the image placement.

---

Husband, proud father of 3, maker and a car guy
WordPress Maintenance & Support | Get #WordPress and #GenesisWP help at WPMgmt.co

[nhlennox]

Great! Thank you.

[Author]

Posts