Altitude Pro Responsive Header Tweaks

[imabbbParticipant]

Hi all, I like the Altitude Pro child theme, but I want to tweak the header at different breakpoints.

Above 800px, the header is fixed-width and transparent until I begin to scroll and then it turns black, reduces height, and goes 100% width. First question: How can I have that black header display at all times?

Below 800px, the mobile header appears but there seems to be too much padding around the header image. Second question: How can I adjust this to move the image down, closer to the hamburger icon? Or move the hamburger icon to the side, inline with the header image? Either solution would be fine. The default header I have now takes up the top 1/3 of my 5.5" mobile screen. Damn that's ugly.

I looked hard for these settings with no luck. Can you help? TIA Bill

http://regarb.com

[ErikaParticipant]

Hi Bill,

To make the header black, replace the code in line 1130 of your style.css with this:

.featured-section .site-header {
	background-color: #000;
}

To remove the white border on the bottom in line 1134:

.featured-section .site-header > .wrap {
	border-bottom: 0px solid #fff;
}

To reduce the height of the mobile header, replace the code in line 2001 with this:

.site-header .title-area, .site-header.dark .title-area {
	padding: 0;
}

Hopefully this helps!

[imabbbParticipant]

Thank you Erika! All three solutions worked. Be blessed, Bill

[Author]

Posts