Make Logo / Header Smaller on Mobile Devices?

Hi there,

You can use the following CSS to set the “max width” of the logo image. This will cause it to be no larger than this on all views (desktop, tablet, phone, etc.)

img.custom-logo {
    max-width: 150px !important;
}

Hope this helps!

Thanks a lot! It looks better IMO on desktop / notebook now : )

On tablets and phones the masthead(?) has too much padding on the bottom it seems, I tried the following CSS codes but it did nothing

@media only screen and (max-width: 960px) #masthead.site-header {
	padding-bottom: 0px;
}

If I remove “@media.. 960px)”, then it’s ok, but it also changes the look on desktop / notebook…

Besides, is it possible to make the website looks the same on phones as tablet? Means moving the logo to the left and the menu button (perhaps change to 3 bars only?) to the top right?

Cheers.

Edit: Scratched the first part, the proper CSS codes should be

@media only screen and (max-width: 960px) {
	#masthead.site-header {
		padding-bottom: 0px;
	}
}

• This reply was modified 3 years, 11 months ago by loyukfai.
• This reply was modified 3 years, 11 months ago by loyukfai.
• This reply was modified 3 years, 11 months ago by loyukfai.
• This reply was modified 3 years, 11 months ago by loyukfai.

For the second point, I hacked together some CSS codes as below, what do you think?

.main-navigation .menu-toggle {
	position: absolute;
	top: 0rem;
  right: 0rem;	
}

.main-navigation .menu-toggle {
	visibility: hidden;
}

.main-navigation .menu-toggle::after {
	content: "\2630";
	font-size: 2rem;
	visibility: visible;
}

However, there is still a little problem, on a phone the header image and the hamburger menu “click area” is overlapped, and it’s a bit difficult to open the hamburger menu…

Cheers.

• This reply was modified 3 years, 11 months ago by loyukfai.

Here is a screenshot trying to illustrate the issue:

https://ibb.co/JzYRZh2

Cheers.

You may wish to try the following code to make the header image area less wider than it is currently:

@media only screen and (max-width: 400px) {
	.site-branding {
		width: 90%;
	}
}

In my tests it prevents the header image div from reaching the mobile menu. In my screenshot here you can see the menu falls within the margin outside the image div itself.

Hope this helps!

Thx! It moved the logo a bit left, but it’s better than having it overlapped with the hamburger menu.

Cheers.

You are also welcome to tweak the code a bit. I had trouble testing your issue (I was able to click the menu fine on my iphone) so I chose 90% at random since it appeared to let the div clear the menu. But it may be the case that 95% or 92% is better, so it’s worth experimenting.

Cheers!

Thanks! Will do.

I wonder if it’s possible to make the hamburger menu element stay “on top” of the logo/site-branding as well?

Cheers.

You may be able to do that as well, although it’s out of the scope of our support.

Already helped a lot, thanks very much.

I gather that the downloadable theme is different from that of wordpress.com (have another site hosted there also using Dyad 2), some functions are missing, but still very nice.

Hope you can keep both updated from time to time.

Thanks a lot.

WordPress.com as a platform has functionality that is not found on self-hosted WordPress (.org) sites by default, which usually accounts for the differences you see in the themes. However you can close the gap by adding the Jetpack plugin to your site, which adds the same functionality you have installed automatically on WordPress.com.

With that said however, there can be small differences between the .org theme and .com version, even if you use Jetpack.

Hope this helps!