Join the waitlist

Change the logo size on mobile in WordPress

Give your site logo a separate width on phones, so a big desktop logo doesn’t crowd a small header. The height scales to match.

Get Grinner free
See it live

Type

An upgrade to the Site Logo block

Find it

Site Logo settings, Mobile width (px)

Phones

Its own width at 767px and narrower

Speed

Nothing moves, it’s just a width

Live demo

Big on desktop, neat on phones.

This is the real Site logo on phones setting, running on this page.

Narrow the window below 768px to see it shrink

Settings    Width 200px     Mobile width (px) 90

What you can change

The settings worth knowing.

Two widths, one for phones and one for everything else.

Menu

Mobile width 100px

Mobile width (px)

A phone width

From 20 to 400px, for screens 767px and narrower.

Width 200px

Width

Desktop and tablet

WordPress’s own width setting covers bigger screens.

Menu

Pinned while the page scrolls

Sticky on mobile

A compact pinned bar

Pair a smaller phone logo with a sticky header for a tidy bar that stays put.

How to add it

Three steps. No new tool.

1

Install Grinner free

It’s on WordPress.org. Or go to Plugins, Add New, and search for Grinner Blocks.

2

Select the Site Logo

In your header template part, or wherever you use it.

3

Set the phone width

Enter a Mobile width between 20 and 400px, then save.

Good to know

Fair questions.

It is a Grinner upgrade to the Site Logo block. Your logo gets a separate width on phones, and its height scales to match. Use it so a big desktop logo doesn’t crowd a small phone header.

No. There’s one phone width, and WordPress’s own Width covers tablet and desktop.

Yes, it scales to keep the logo’s shape.

At 767px and narrower.

No. Nothing moves, so it makes no difference.

GrinBot -⁠ coming soon

Make your next site beautiful.

GrinBot designs and builds it for you. Join the waitlist for the launch price.

  • Studio-quality design
  • Built for speed
  • Pay once, no subscription

You’re on the list. We’ll email you when GrinBot launches.

Something went wrong. Please try again in a moment.

We’ll email you about the launch. Unsubscribe any time. Privacy policy

Or get the free Grinner plugin →

Pairs well with

Try it with these.

All header and menus features

Sticky header

A header that stays at the top and turns to frosted glass.

Navigation hover effects

Underlines, pills and fills on menu links, and a mark on the current page.

Image sizing and rotation

A separate width for phones, crisp SVG sizing and a resting tilt.

Grinner grinning

Go make something
beautiful.

Get Grinner free

Free on WordPress.org · No Pro version