Setting the Logo Max Height

2 min readUpdated October 31, 2026

Logo max height sets the tallest your logo may be at the top of the sidebar and above the login form. Raise it for a tall or square logo that looks too small, or lower it for a logo that takes too much room.

Set the logo max height#

Go to WooCommerce > Account Portal > Appearance.
In section 4. Logo & login page, enter a number in Logo max height (in px).
Click Save Settings and check the sidebar and the login page.

Setting	Default	Range
Logo max height	80 px	24 to 240 px

A value below 24 is saved as 24, and a value above 240 is saved as 240.

Where it applies#

Place	How the max height is used
Top of the sidebar	The logo fills the sidebar width and is capped by it (the sidebar is 280px, 240px on tablets, minus 32px of space), and it is at most this tall. The height includes the logo’s 20px top padding, so at 80 px the image itself is up to 60px tall.
Login page, brand panel (Split and Full background layouts)	Up to twice this height, and up to 500px wide (360px wide with Full background).
Login page, above the form (Centered card and Minimal layouts)	Up to this height.
Login page, above the form on phones with Split	Up to 48px or this height, whichever is smaller.

Where it does not apply#

These places use fixed sizes so the bars keep their height:

The phone top bar (up to 35px tall).
The Top tabs layout (40px tall).
The Icon rail layout (44px tall).
The top bar of the Floating dock layout (40px tall).

Tips#

Wide logos: the sidebar width limits a wide logo before the height does, so raising the max height may not make it bigger. Use a version of your logo with less empty space around it.
Square or tall logos: try 100 to 140 px. Remember the 20px padding in the sidebar.
Brand panel too big? The brand panel uses twice the value. If the login logo is too big but the sidebar logo is right, lower the brand panel size with Advanced CSS (see below).

For developers#

The value is printed as the CSS variable --wap-logo-max-h on :root. You can override it, for example only on phones, in Advanced CSS:

@media (max-width: 768px) {
    :root { --wap-logo-max-h: 56px; }
}

Or change only the login brand panel:

.wap-portal-body .wap-auth-logo { max-height: 120px; }