Reformatting Site Logo and Links on Default Menu (Edin)

Could you provide a link to your site running Edin and Jetpack?

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!

@iteneranter, give the following a try and see what you think.

@media screen and (max-width: 599px) {
	.site-branding {
		width: 50%;
		margin-top: -70px;
	}
	.site-header {
		background: #F8F8F8;
		max-height: 96px
	}
}

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 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?

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?

Hi, we can use a media query to move the logo to the left. It centers at 599px and narrower, so…

@media screen and (max-width: 599px) {
	.site-logo {
		margin-left: 25px;
	}
}

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

Thank you very much for your help!