iteneranter

Hello, Kathryn. Thank you very much for your reply. The formatting items I described can be found here. If you would like any additional information, please let me know. Thanks!

Hello, sacredpath. Your recommendation resolved my one remaining issue.

Thank you very much for your help!

Update:

Here is what I opted to do thus far:

@media screen and (max-width: 599px) {
	.site-branding {
		width: 100%;
		margin-top: -70px;
		margin-left: -25px;
	}
	.site-logo-link {
		background: #FFF;
		margin-bottom: 1px;
	}

This approach eliminates problem identified in Issue #1 above. It also eliminates the problems identified in Issue #2 above.

However, it does place the logo at the center of the screen, whereas before it was left justified. Any thoughts on this?

Hello again, sacredpath. One additional observation: it appears that the following section of code renders the drop-down menu from the header invisible below a height of 96px:

.site-header { .... max-height: 96px;}

Any additional thoughts on my previous questions?

Hello, sacredpath. Thank you very much for your suggestion.

I added your code to my style.css file, which did horizontally align the icon with the header buttons (when viewing from a mobile), but it also created two new issues:

1.) The header is now taller than the buttons. I tried modifying max-height for .site-header, but this did not seem to help. How do I make the header the same size as the buttons?

2.) The background color of the buttons is different from that of the header and the logo. How would I go about changing these to make sure they are the same? Stylistically, is that even a good idea?

In any case, thanks again for your help!

Hello, Kathryn. Thank you for your interest. Please see this website on a mobile for an example of this phenomenon. Thank you for your help!