How to Adjust WordPress Admin Menu Spacing

Adjusting WordPress admin menu spacing lets you make the wp-admin sidebar denser, more spacious or easier to use on touch devices without changing the structure of the navigation itself.

The default WordPress administration menu uses a relatively compact spacing system designed to balance several competing requirements:

• fit a reasonable number of menu items on screen;
• keep icons vertically aligned;
• leave enough room for readable labels;
• support submenus;
• work with the collapsed sidebar;
• switch to larger controls on narrow screens.

That default is appropriate for many installations, but not every wp-admin environment has the same needs.

A site with many plugins might need a denser menu so important entries remain visible without excessive scrolling. A client dashboard or touchscreen-oriented backend might benefit from more generous spacing.

The important point is that menu spacing is not controlled by one universal CSS property. WordPress’s sidebar combines:

top-level label padding
+
menu item height
+
icon dimensions
+
submenu padding
+
separators
+
notification counters
+
responsive overrides

Changing one of those values without understanding the others can leave icons off-center, submenu items inconsistent or the responsive menu unnecessarily large.

This guide explains how WordPress currently spaces its administration menu, which selectors control the layout, how to make the sidebar more compact or spacious, how to preserve the folded and mobile states, and how typography, width and touch targets interact with menu spacing.

How WordPress spaces the admin menu by default

The current WordPress Core administration menu styles can be inspected directly in the WordPress Core admin-menu.css source. The broader administration layout rules are also available in WordPress Core common.css.

The primary navigation element is:

#adminmenu

Inside it, each top-level menu item contains an icon area and a menu-name area.

A simplified structure looks like:

<ul id="adminmenu">

    <li class="menu-top">

        <a class="menu-top">

            <div class="wp-menu-image"></div>

            <div class="wp-menu-name">
                Posts
            </div>

        </a>

        <ul class="wp-submenu">
            ...
        </ul>

    </li>

</ul>

The spacing therefore comes from several nested elements rather than the <li> alone.

The default top-level spacing

Current WordPress Core applies vertical padding to the menu-name area. The relevant rule is equivalent to:

#adminmenu div.wp-menu-name {
    padding: 8px 8px 8px 36px;
}

The important vertical values are:

padding-top: 8px
padding-bottom: 8px

The horizontal space on the icon side accounts for the icon area.

If you need a refresher on how padding contributes to an element’s internal spacing, see the MDN CSS padding reference.

The default item height and icon area

Core also coordinates the menu around a top-level row baseline and a dedicated icon container. The relevant values are approximately:

Top-level row:
34px

Icon area:
36px × 34px

The important lesson is that the visual height is not created by text padding alone.

WordPress coordinates:

text
+
padding
+
icon dimensions
+
line height

to create the final navigation row.

The default submenu spacing

Submenu links use a smaller vertical padding, with the Core baseline equivalent to:

#adminmenu .wp-submenu a {
    padding: 5px 0;
}

More specific rules provide the horizontal indentation required by the submenu layout.

That gives us a useful baseline:

Top-level vertical padding:
8px

Submenu vertical padding:
5px

Top-level row baseline:
34px

Menu spacing, font size and width solve different problems

Before changing anything, identify what actually feels wrong.

There are three common variables:

Padding
→ vertical breathing room

Font size
→ text readability

Menu width
→ horizontal room

They interact visually, but they should not be treated as substitutes for one another.

Increase padding when the menu feels vertically cramped

If the labels are readable but the rows feel difficult to target, more vertical padding may help.

For example:

8px
→
10px

can make the top-level entries noticeably more spacious.

Increase font size when the problem is readability

If users are struggling to read:

Posts
Media
Settings

making the rows taller without enlarging the text does not directly solve the typography problem.

Font sizing deserves its own control.

TheOneWP Custom Admin Menu Font Size provides separate controls for top-level menu text, icons and submenu text.

Increase width when labels wrap

If this:

Marketing Automation

wraps onto two lines, adding vertical padding usually makes the situation worse because the already-wrapped row becomes even taller.

The appropriate fix may instead be a wider sidebar.

See How to Widen the WordPress Admin Menu.

How to make the WordPress admin menu more spacious or compact

A simple desktop customization can target the menu-name area and submenu links.

A more spacious desktop menu

For example:

@media screen and (min-width: 961px) {

    #adminmenu div.wp-menu-name {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #adminmenu .wp-submenu li > a {
        padding-top: 7px;
        padding-bottom: 7px;
    }

}

This changes:

Top-level:
8px → 10px

Submenu:
5px → 7px

without rewriting the entire administration menu.

A more compact desktop menu

A plugin-heavy site may have a sidebar long enough to require frequent vertical scrolling. Reducing vertical spacing slightly can allow more items to remain visible.

@media screen and (min-width: 961px) {

    #adminmenu div.wp-menu-name {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #adminmenu .wp-submenu li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }

}

This changes:

Top-level:
8px → 6px

Submenu:
5px → 4px

The menu becomes denser without radically changing WordPress’s navigation model.

Compact does not mean tiny

A sidebar should not be compressed until each item becomes difficult to click.

A dense menu is useful only if users can still:

• identify the label;
• activate the correct row;
• open submenus predictably;
• distinguish adjacent items;
• use keyboard focus;
• operate the interface at browser zoom.

Saving a few vertical pixels is not worth making ordinary navigation error-prone.

Menu length may be the actual problem

If a WordPress installation has dozens of top-level entries, reducing padding may only delay the point at which the menu becomes cumbersome.

In that situation, consider restructuring the navigation itself.

TheOneWP Admin Menu Organizer can reorder and restructure administration navigation instead of simply forcing more entries into the same vertical space.

Top-level and submenu spacing should be controlled separately

There is no requirement that the top-level menu and submenu use identical vertical padding. They serve different purposes.

Top-level entries represent major administration sections:

Posts
Media
Pages
Users
Settings

Submenus represent more granular destinations:

Posts
├── All Posts
├── Add Post
├── Categories
└── Tags

A reasonable configuration might therefore be:

Top level:
10px vertical padding

Submenu:
6px vertical padding

rather than making every navigation layer equally tall.

Why submenus often stay slightly denser

A submenu may contain several related destinations.

If each receives extremely generous padding, an open section can quickly occupy most of the sidebar.

For example:

WooCommerce
├── Home
├── Orders
├── Customers
├── Coupons
├── Reports
├── Settings
├── Status
└── Extensions

Doubling every submenu item’s vertical padding could create more scrolling than usability benefit.

Maintain a clear visual hierarchy

Slightly more space around top-level items can help distinguish:

major section
from
destination inside section

without requiring additional borders or decorative elements.

This is also why it is useful to think in terms of a spacing system rather than isolated pixel values. MDN’s documentation on CSS values and units provides useful background when choosing between fixed and relative measurements.

Spacing must remain compatible with icons, counters and separators

The WordPress sidebar contains more than labels.

Menu-spacing changes should also be tested against:

• Dashicons;
• custom plugin icons;
• notification counters;
• update badges;
• menu separators;
• current-item indicators;
• submenu flyouts.

WordPress icons have their own dimensions

Core coordinates the expanded menu with an icon container approximately:

36px × 34px

If your custom row height becomes substantially larger than the Core baseline, the icon may no longer appear centered.

A more complete custom implementation can therefore calculate an appropriate icon container height alongside the top-level padding.

Notification counters depend on line alignment

WordPress uses elements such as:

.menu-counter
.awaiting-mod
.update-plugins

for notification badges.

Those badges have their own dimensions, line-height and margins. After changing menu spacing or typography, check that they still align with the label rather than floating awkwardly above or below it.

Menu separators have independent spacing

Core also includes:

li.wp-menu-separator

with its own height and margins.

Changing item padding does not automatically adjust those separators.

If you create a very spacious menu, the separator may appear disproportionately narrow. If you create a highly compact menu, it may consume a surprisingly large percentage of the available vertical rhythm.

Be careful with physical left and right properties

If you create more extensive menu customizations, remember that WordPress can operate in right-to-left interfaces.

Modern CSS provides logical properties such as:

padding-inline-start
padding-inline-end
margin-inline-start
margin-inline-end

that adapt to writing direction. See the MDN CSS Logical Properties documentation for the underlying model.

You should still test against WordPress Core’s existing selectors rather than blindly replacing every physical property, but logical properties are particularly useful in your own custom administration components.

Responsive and touch behavior must be preserved

One of the easiest mistakes is applying a global rule such as:

#adminmenu div.wp-menu-name {
    padding: 14px 8px 14px 36px !important;
}

without considering WordPress’s responsive administration states.

The current WordPress administration system uses important breakpoint transitions around:

960px
→ sidebar auto-fold behavior

782px
→ mobile-oriented administration behavior

The broader behavior is explained in WordPress Admin Menu Responsive Breakpoints, Explained.

Why desktop spacing is often best scoped above 960px

If the goal is simply to customize the normal expanded desktop menu, a rule such as:

@media screen and (min-width: 961px) {
    ...
}

lets WordPress regain control when the interface reaches its narrower navigation states.

This is usually safer than imposing the same custom row dimensions on:

desktop
tablet
mobile

regardless of how Core itself changes the navigation.

Touch users may need more spacing, not less

A menu optimized for the maximum number of visible entries can become difficult to use with a finger.

The relationship is therefore closer to:

Mouse-heavy dense admin
→ potentially smaller spacing

Touch-heavy admin
→ potentially larger targets

CSS can also distinguish input precision from viewport width. The MDN pointer media feature documentation explains values such as:

pointer: fine
pointer: coarse

For example:

@media (pointer: coarse) {

    #adminmenu a.menu-top {
        min-height: 44px;
    }

}

This addresses input characteristics rather than assuming that every narrow screen is touch-based and every wide screen uses a mouse.

For the complete interaction considerations, see Making the WordPress Admin Touch-Friendly.

Target size matters beyond aesthetics

WCAG 2.2 includes Success Criterion 2.5.8, Target Size (Minimum). The official W3C Target Size (Minimum) guidance uses:

24 × 24 CSS pixels

as the minimum target size, subject to defined exceptions.

This should be treated as an accessibility floor rather than automatically as the ideal size for a frequently used administration navigation item.

Load spacing customizations through WordPress instead of editing Core

Do not edit:

wp-admin/css/admin-menu.css

or:

wp-admin/css/common.css

directly.

Those files belong to WordPress Core and can be replaced by updates.

Instead, load your own administration stylesheet through WordPress’s normal asset system.

Use admin_enqueue_scripts

WordPress provides the:

admin_enqueue_scripts

hook specifically for loading scripts and styles in the administration area.

The official admin_enqueue_scripts documentation also exposes the current $hook_suffix, which can be used to restrict assets to particular administration screens.

A global admin-menu customization might use:

function myplugin_admin_menu_spacing() {

    wp_enqueue_style(
        'myplugin-admin-spacing',
        plugins_url(
            'admin-spacing.css',
            __FILE__
        ),
        array(),
        '1.0.0'
    );
}

add_action(
    'admin_enqueue_scripts',
    'myplugin_admin_menu_spacing'
);

And:

admin-spacing.css

could contain:

@media screen and (min-width: 961px) {

    #adminmenu div.wp-menu-name {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #adminmenu .wp-submenu li > a {
        padding-top: 6px;
        padding-bottom: 6px;
    }

}

Use get_current_screen() for more precise scoping

If the customization should apply only in a specific administration context, WordPress also provides:

get_current_screen()

The official get_current_screen() documentation describes the WP_Screen object returned for the current administration screen.

This is particularly useful when developing plugin-specific administration interfaces rather than changing the global sidebar everywhere.

Use wp_add_inline_style() for dynamic settings

If menu spacing comes from a saved option, generating an entire physical stylesheet for every value is not always necessary.

WordPress provides:

wp_add_inline_style()

for attaching additional CSS to an already enqueued stylesheet. See the official wp_add_inline_style() documentation.

A simplified implementation might look like:

function myplugin_admin_menu_spacing() {

    wp_enqueue_style(
        'myplugin-admin',
        plugins_url(
            'admin.css',
            __FILE__
        ),
        array(),
        '1.0.0'
    );

    $padding = 10;

    $css = sprintf(
        '@media screen and (min-width: 961px) {
            #adminmenu div.wp-menu-name {
                padding-top: %1$dpx;
                padding-bottom: %1$dpx;
            }
        }',
        $padding
    );

    wp_add_inline_style(
        'myplugin-admin',
        $css
    );
}

add_action(
    'admin_enqueue_scripts',
    'myplugin_admin_menu_spacing'
);

Do not solve specificity problems with unlimited !important

You may occasionally need:

!important

when intentionally overriding Core or another administration theme.

But a stylesheet consisting of:

padding: ... !important;
height: ... !important;
line-height: ... !important;
margin: ... !important;

across dozens of broad selectors becomes difficult to reason about and can override responsive rules you intended to preserve.

Prefer targeted selectors and understand which Core property you actually need to replace.

Make spacing configurable without generating unsafe or fragile CSS

If you’re building a plugin that allows administrators to choose the spacing, the value should be validated before being inserted into generated CSS.

Validate numeric values

A simple pixel-only setting can be normalized as an integer:

$padding = absint(
    get_option(
        'my_admin_menu_padding',
        8
    )
);

You can then enforce practical limits:

$padding = max(
    2,
    min(
        20,
        $padding
    )
);

This prevents configuration mistakes from producing absurd values.

Validate units separately

If you support multiple CSS units, whitelist them explicitly.

$allowed_units = array(
    'px',
    'em',
    'rem',
);

$unit =
    in_array(
        $saved_unit,
        $allowed_units,
        true
    )
        ? $saved_unit
        : 'px';

Then construct the final CSS value from separately validated components.

Understand the difference between px, em and rem

These values are not interchangeable:

8px
0.6em
0.5rem

A pixel value is based on CSS pixels.

An em value is relative to the relevant element’s font size.

A rem value is relative to the root element’s font size.

See the MDN guide to CSS values and units for the broader distinction between absolute and relative CSS lengths.

Relative units can be useful for a scalable administration design, but they also mean that changing typography can alter the effective menu spacing.

Custom Menu Item Padding in TheOneWP

TheOneWP Custom Menu Item Padding provides separate controls for the vertical spacing of top-level WordPress admin items and submenu items.

The module supports:

• an independent top-level menu padding value;
• an independent submenu padding value;
• px, em and rem units;
• individual Reset controls;
• automatic icon alignment for pixel-based top-level values;
• admin-only CSS output.

The defaults match WordPress Core

The default values are:

Menu:
8px

Sub Menu:
5px

which correspond to the standard WordPress menu-spacing baseline.

This means Reset can return the navigation to familiar Core proportions without requiring the administrator to remember the original values.

Top-level and submenu values are independent

You could configure:

Menu:
10px

Sub Menu:
5px

for spacious major navigation with compact submenus.

Or:

Menu:
6px

Sub Menu:
4px

for a denser plugin-heavy administration interface.

Pixel values receive automatic icon compensation

The important implementation detail is that changing top-level padding also changes the effective height needed by the icon container.

When the top-level value uses:

px

the module recalculates the icon container dimensions to keep the icon visually centered relative to the new row height.

This is based on WordPress’s default menu-item geometry and avoids one of the most common problems with simplistic padding overrides:

larger text row
+
unchanged icon position
=
misaligned navigation

Relative units need additional visual testing

When using:

em
or
rem

the padding still changes, but relative values can interact with typography differently from fixed pixel measurements.

If exact icon alignment matters, test those configurations alongside any custom administration font-size settings.

Test spacing as part of the complete admin sidebar

A menu does not exist in isolation from the rest of wp-admin.

Changing spacing can interact with:

• font size;
• menu width;
• long labels;
• custom fonts;
• icons;
• notification badges;
• menu organization;
• browser zoom;
• touch input;
• responsive breakpoints.

Test long and short menus

A spacing value that looks elegant with:

8 menu entries

may become inconvenient when:

25 plugin entries

are present.

Test the real production-style menu rather than an almost empty development installation.

Test long labels

Use the longest labels that actually occur on the installation.

Spacing can affect where labels wrap and therefore the total height of a row.

Test every important responsive state

Verify at least:

expanded desktop menu

manually folded menu

961px

960px auto-fold state

783px

782px mobile state

mobile menu opened

mobile menu closed

Testing immediately on both sides of a breakpoint is much more useful than checking only:

1920px
and
390px

because transition bugs frequently appear exactly where one responsive state hands control to another.

Test browser zoom and reflow

Check practical zoom values such as:

125%
150%
200%

because zoom reduces the effective CSS viewport and can activate narrower responsive states even on a physically large monitor.

The W3C’s WCAG Reflow guidance provides useful accessibility context for interfaces that need to remain usable when the available CSS viewport becomes significantly narrower.

Test keyboard navigation

Spacing changes should not interfere with:

• focus indication;
• submenu access;
• tab navigation;
• current-item visibility.

A larger row is not useful if custom CSS accidentally removes the visible focus state required to understand where keyboard navigation currently is.

Inspect the actual Core source after major WordPress updates

If your plugin depends on exact Core menu dimensions, periodically compare your assumptions against the current WordPress development repository.

Values such as:

8px
5px
34px
36px

describe the current Core implementation. They are not a public API contract guaranteeing that WordPress must preserve those exact numbers forever.

Common WordPress admin menu spacing mistakes

• Changing padding without checking icon alignment.
• Changing top-level and submenu spacing with one overly broad selector.
• Using margin between clickable items when enlarging the actual clickable target would better solve a touch problem.
• Reducing spacing until rows become difficult to activate.
• Increasing spacing excessively on plugin-heavy sites.
• Applying desktop spacing overrides across WordPress’s narrower responsive states.
• Overwriting touch-oriented navigation rules unnecessarily.
• Using spacing to compensate for text that is actually too small.
• Using spacing to compensate for a sidebar that is actually too narrow.
• Ignoring notification counters.
• Ignoring custom plugin icons.
• Ignoring separators.
• Editing WordPress Core CSS directly.
• Using unvalidated settings inside generated CSS.
• Assuming em, rem and px produce equivalent behavior.
• Ignoring RTL interfaces.
• Testing only the Dashboard at full desktop width.
• Ignoring browser zoom and touch devices.
• Assuming current Core pixel values can never change.

A practical WordPress admin menu spacing strategy

The safest approach is to start from WordPress’s actual defaults rather than rebuilding the sidebar from scratch.

A useful workflow is:

1. Identify the problem.

2. Decide whether it is:
   spacing,
   typography,
   width,
   touch interaction,
   or menu organization.

3. Start from:
   8px top-level
   5px submenu.

4. Change one level at a time.

5. Keep adjustments modest.

6. Check icon and badge alignment.

7. Test desktop and folded states.

8. Preserve Core mobile behavior
   unless there is a specific reason
   to replace it.

9. Test touch, keyboard and zoom.

10. Reassess whether the menu structure
    itself needs simplification.

Example: comfortable desktop sidebar

@media screen and (min-width: 961px) {

    #adminmenu div.wp-menu-name {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    #adminmenu .wp-submenu li > a {
        padding-top: 6px;
        padding-bottom: 6px;
    }

}

Example: compact plugin-heavy sidebar

@media screen and (min-width: 961px) {

    #adminmenu div.wp-menu-name {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    #adminmenu .wp-submenu li > a {
        padding-top: 4px;
        padding-bottom: 4px;
    }

}

These values are examples rather than universal recommendations.

The correct spacing depends on the actual menu, typography, screen size, input method and users.

Related guides

• Making the WordPress Admin Touch-Friendly
• How to Widen the WordPress Admin Menu
• WordPress Admin Menu Responsive Breakpoints, Explained
• Why WordPress Plugins Hardcode 160px into their Panels
• Reducing WordPress Admin Confusion for Clients
• Standardizing the WordPress Admin for Teams

Final recommendation

WordPress admin menu spacing should be adjusted as part of the complete sidebar system rather than by randomly increasing or decreasing padding until the menu looks different.

The current Core baseline is useful to remember:

Top-level padding:
8px vertical

Submenu padding:
5px vertical

Top-level row baseline:
approximately 34px

Icon container:
approximately 36px × 34px

From there, decide what problem you are actually solving.

If the sidebar is too dense, modestly increase vertical padding. If a plugin-heavy menu requires excessive scrolling, reduce spacing carefully. If labels are too small, adjust typography instead. If labels wrap, reconsider the menu width. If there are simply too many entries, reorganize the navigation rather than compressing it indefinitely.

Preserve WordPress’s responsive states unless the project genuinely requires a custom mobile administration system. A desktop spacing override should not casually replace the navigation behavior Core provides for folded, narrow and touch-oriented interfaces.

TheOneWP Custom Menu Item Padding provides separate top-level and submenu spacing controls, keeps WordPress’s 8px and 5px defaults available through Reset, and compensates for icon positioning when pixel-based top-level padding changes.

The goal is not maximum density or maximum whitespace. It is a sidebar whose spacing matches the amount of navigation, the typography, the available screen space and the way administrators actually interact with wp-admin.