problems with sizing & placement of header image & menu

[CatherineEOliver]

I'm using this theme at http://www.notetoself.blog/ and am having troubles with the header area. I don't know if the problem lies with the theme or with me (I can code HTML and basic CSS, but I'm not a developer).

Problem 1: The header image is resizing itself in odd ways. When I used the plain Genesis Sample theme, the header image behaved as I expected, getting smaller and centering itself when the viewport got smaller. With this Mobile-First theme, the header image gets smaller sooner than it should (as the viewport gets smaller) and then jumps to a big size again (when the viewport is quite small). I haven't changed much in the media queries sections of the CSS (only a couple of changes, IIRC). Do I need to add CSS to the various media queries? If so, can you please point me in the right direction?

Problem 2: The primary navigation menu, in the header, drops below the whole header area (into the site-inner part, I believe) when the viewport gets smaller. I don't have a clue how to fix that. Any help would be greatly appreciated.

Thank you. -Catherine

[neilgee]

Problem 1 is that you have an edit in the CSS on line 2190 which is making the logo smaller - it was set to 30% the edit makes it 20% when the viewport is less than 1200px

Problem 2 In style.css

.site-header {
	background: url(/wp-content/uploads/blue_wall_60789f_crop-sharp-noise2.jpg) top left repeat-x; 
        min-height: 160px;
	border-bottom: 15px solid #e8edf0; 
	clear: both;
}
	

try

.site-header {
	background: url(/wp-content/uploads/blue_wall_60789f_crop-sharp-noise2.jpg) top left repeat-x; 
	border-bottom: 15px solid #e8edf0; 
	clear: both;
}

@media only screen and (min-width: 768px) {
	.site-header { 
           min-height: 160px;
	}
}

This will only set the minimum height when the viewport is over 768px leaving smaller devices with no height restriction.

[CatherineEOliver]

Thank you, Neil.

Unless I'm still doing something wrong (very possible), the changes you suggested aren't quite making it work yet. I might need to change the media queries so they have ranges of min-width and max-width, rather than just min-width, and/or I might need to add settings for the .site-title or .custom-logo class, so I can treat the logo separately from that dark blue background texture. (The logo is its own file, with a transparent background.)

I'll play around with those changes and see what happens.

[CatherineEOliver]

Ah, OK, I see (at least) one thing I did wrong. I didn't set the proper image dimensions in the section you provided for that in the functions.php file. (I had seen that section and changed one dimension, but maybe got distracted and didn't enter the other one, plus I had the image height and width numbers reversed in my head.) D'oh!