#customize-theme-controls #accordion-section-menu_locations {
#customize-theme-controls #accordion-section-menu_locations > .accordion-section-title {
border-bottom-color: #dcdcde;
#customize-theme-controls .customize-section-title-nav_menus-heading,
#customize-theme-controls .customize-section-title-menu_locations-heading,
#customize-theme-controls .customize-section-title-menu_locations-description {
#customize-theme-controls .customize-control-description.customize-section-title-menu_locations-description {
/* Override the default italic style for control descriptions */
#customize-controls .theme-location-set,
#customize-controls .control-section .accordion-section-title:focus .menu-in-location,
#customize-controls .control-section .accordion-section-title:hover .menu-in-location {
/* The `edit-menu` and `create-menu` buttons also use the `button-link` class. */
.customize-control-nav_menu_location .edit-menu,
.customize-control-nav_menu_location .create-menu {
#customize-controls .customize-control-nav_menu_name {
.customize-control-nav_menu_name p:last-of-type {
#customize-new-menu-submit {
.wp-customizer .menu-item-bar .menu-item-handle,
.wp-customizer .menu-item-settings,
.wp-customizer .menu-item-settings .description-thin {
.wp-customizer .menu-item-bar {
.wp-customizer .menu-item-bar .menu-item-handle {
.wp-customizer .menu-item-handle .item-title {
.wp-customizer .menu-item-handle .item-type {
.wp-customizer .menu-item-handle:hover {
.customize-control-nav_menu_item.has-notifications .menu-item-handle {
border-left: 4px solid #72aee6;
.wp-customizer .menu-item-settings {
border: 1px solid #8c8f94;
.wp-customizer .menu-item-settings .description-thin {
.wp-customizer .menu-item-settings input[type="text"] {
.wp-customizer .menu-item-settings .submitbox {
.wp-customizer .menu-item-settings .link-to-original {
.wp-customizer .menu-item .submitbox .submitdelete {
* Menu items reordering styles
.menus-move-left:before {
.menus-move-right:before {
.reordering .menu-item .item-controls,
.reordering .menu-item .item-type {
.reordering .menu-item-reorder-nav {
.customize-control input.menu-name-field {
width: 100%; /* Override the 98% default for customizer inputs, to align with the size of menu items. */
.wp-customizer .menu-item .item-edit {
margin-right: 0 !important;
.wp-customizer .menu-item.menu-item-edit-active .item-edit .toggle-indicator:before {
.wp-customizer .menu-item-settings p.description {
.wp-customizer .menu-settings dl {
.wp-customizer .menu-settings .checkbox-input {
.wp-customizer .menu-settings .menu-theme-locations {
border-top: 1px solid #c3c4c7;
.wp-customizer .menu-settings {
.wp-customizer .menu-location-settings {
.wp-customizer .control-section-nav_menu .menu-location-settings {
border-top: 1px solid #dcdcde;
.wp-customizer .control-section-nav_menu .menu-location-settings,
.customize-control-nav_menu_auto_add {
.menu-location-settings .customize-control-checkbox .theme-location-set {
.customize-control-nav_menu_auto_add label {
.menu-location-settings .new-menu-locations-widget-note {
.customize-control-menu {
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle {
.customize-screen-options-toggle {
#customize-controls .customize-info .customize-help-toggle {
#customize-controls .customize-info .customize-help-toggle:before {
.customize-screen-options-toggle:hover,
.customize-screen-options-toggle:active,
.customize-screen-options-toggle:focus,
.active-menu-screen-options .customize-screen-options-toggle,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:hover,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:active,
#customize-controls .customize-info.open.active-menu-screen-options .customize-help-toggle:focus {
.customize-screen-options-toggle:focus,
#customize-controls .customize-info .customize-help-toggle:focus {
/* Only visible in Windows High Contrast mode */
outline: 1px solid transparent;
.customize-screen-options-toggle:before {
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
.customize-screen-options-toggle:focus:before,
#customize-controls .customize-info .customize-help-toggle:focus:before {
.wp-customizer #screen-options-wrap {
border-top: 1px solid #dcdcde;
.wp-customizer .metabox-prefs label {
/* rework the arrow indicator implementation for NVDA bug same as #32715 */
.wp-customizer .toggle-indicator {
.rtl .wp-customizer .toggle-indicator {
text-indent: 1px; /* account for the dashicon alignment */
.wp-customizer .menu-item .item-edit .toggle-indicator:before,
#available-menu-items .accordion-section-title .toggle-indicator:before {
padding: 1px 2px 1px 0px;
font: normal 20px/1 dashicons;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-decoration: none !important;
.control-section-nav_menu .field-link-target,
.control-section-nav_menu .field-title-attribute,
.control-section-nav_menu .field-css-classes,
.control-section-nav_menu .field-xfn,
.control-section-nav_menu .field-description {
.control-section-nav_menu.field-link-target-active .field-link-target,
.control-section-nav_menu.field-title-attribute-active .field-title-attribute,
.control-section-nav_menu.field-css-classes-active .field-css-classes,
.control-section-nav_menu.field-xfn-active .field-xfn,
.control-section-nav_menu.field-description-active .field-description {
/* WARNING: The 20px factor is hard-coded in JS. */
.menu-item-depth-0 { margin-left: 0; }
.menu-item-depth-1 { margin-left: 20px; }
.menu-item-depth-2 { margin-left: 40px; }
.menu-item-depth-3 { margin-left: 60px; }
.menu-item-depth-4 { margin-left: 80px; }
.menu-item-depth-5 { margin-left: 100px; }
.menu-item-depth-6 { margin-left: 120px; }
.menu-item-depth-7 { margin-left: 140px; }
.menu-item-depth-8 { margin-left: 160px; } /* Not likely to be used or useful beyond this depth */
.menu-item-depth-9 { margin-left: 180px; }
.menu-item-depth-10 { margin-left: 200px; }
.menu-item-depth-11 { margin-left: 220px; }
/* @todo handle .menu-item-settings width */
.menu-item-depth-0 > .menu-item-bar { margin-right: 0; }
.menu-item-depth-1 > .menu-item-bar { margin-right: 20px; }
.menu-item-depth-2 > .menu-item-bar { margin-right: 40px; }
.menu-item-depth-3 > .menu-item-bar { margin-right: 60px; }
.menu-item-depth-4 > .menu-item-bar { margin-right: 80px; }
.menu-item-depth-5 > .menu-item-bar { margin-right: 100px; }
.menu-item-depth-6 > .menu-item-bar { margin-right: 120px; }
.menu-item-depth-7 > .menu-item-bar { margin-right: 140px; }
.menu-item-depth-8 > .menu-item-bar { margin-right: 160px; }
.menu-item-depth-9 > .menu-item-bar { margin-right: 180px; }
.menu-item-depth-10 > .menu-item-bar { margin-right: 200px; }
.menu-item-depth-11 > .menu-item-bar { margin-right: 220px; }
/* Submenu left margin. */
.menu-item-depth-0 .menu-item-transport { margin-left: 0; }
.menu-item-depth-1 .menu-item-transport { margin-left: -20px; }
.menu-item-depth-3 .menu-item-transport { margin-left: -60px; }
.menu-item-depth-4 .menu-item-transport { margin-left: -80px; }
.menu-item-depth-2 .menu-item-transport { margin-left: -40px; }
.menu-item-depth-5 .menu-item-transport { margin-left: -100px; }
.menu-item-depth-6 .menu-item-transport { margin-left: -120px; }
.menu-item-depth-7 .menu-item-transport { margin-left: -140px; }
.menu-item-depth-8 .menu-item-transport { margin-left: -160px; }
.menu-item-depth-9 .menu-item-transport { margin-left: -180px; }
.menu-item-depth-10 .menu-item-transport { margin-left: -200px; }
.menu-item-depth-11 .menu-item-transport { margin-left: -220px; }
/* WARNING: The 20px factor is hard-coded in JS. */
.reordering .menu-item-depth-0 { margin-left: 0; }
.reordering .menu-item-depth-1 { margin-left: 15px; }
.reordering .menu-item-depth-2 { margin-left: 30px; }
.reordering .menu-item-depth-3 { margin-left: 45px; }
.reordering .menu-item-depth-4 { margin-left: 60px; }
.reordering .menu-item-depth-5 { margin-left: 75px; }
.reordering .menu-item-depth-6 { margin-left: 90px; }
.reordering .menu-item-depth-7 { margin-left: 105px; }
.reordering .menu-item-depth-8 { margin-left: 120px; } /* Not likely to be used or useful beyond this depth */
.reordering .menu-item-depth-9 { margin-left: 135px; }
.reordering .menu-item-depth-10 { margin-left: 150px; }
.reordering .menu-item-depth-11 { margin-left: 165px; }
.reordering .menu-item-depth-0 > .menu-item-bar { margin-right: 0; }
.reordering .menu-item-depth-1 > .menu-item-bar { margin-right: 15px; }
.reordering .menu-item-depth-2 > .menu-item-bar { margin-right: 30px; }
.reordering .menu-item-depth-3 > .menu-item-bar { margin-right: 45px; }
.reordering .menu-item-depth-4 > .menu-item-bar { margin-right: 60px; }
.reordering .menu-item-depth-5 > .menu-item-bar { margin-right: 75px; }
.reordering .menu-item-depth-6 > .menu-item-bar { margin-right: 90px; }
.reordering .menu-item-depth-7 > .menu-item-bar { margin-right: 105px; }
.reordering .menu-item-depth-8 > .menu-item-bar { margin-right: 120px; }
.reordering .menu-item-depth-9 > .menu-item-bar { margin-right: 135px; }
.reordering .menu-item-depth-10 > .menu-item-bar { margin-right: 150px; }
.reordering .menu-item-depth-11 > .menu-item-bar { margin-right: 165px; }
.control-section-nav_menu.menu .menu-item-edit-active {
.control-section-nav_menu.menu .menu-item-edit-active .menu-item-bar {
.control-section-nav_menu.menu .sortable-placeholder {
max-width: calc(100% - 2px);
.menu-item-transport li.customize-control {
.control-section-nav_menu.menu ul.menu-item-transport .menu-item-bar {
.adding-menu-items .control-section {
.adding-menu-items .control-panel.control-section,
.adding-menu-items .control-section.open {
.menu-item-bar .item-delete {
.menu-item-bar .item-delete:before {
font: normal 20px/1 dashicons;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
.menu-item-bar .item-delete:hover,
.menu-item-bar .item-delete:focus {
.adding-menu-items .menu-item-bar .item-edit {
.adding-menu-items .menu-item-bar .item-delete {
* Styles for menu-item addition panel
#available-menu-items.opening {
overflow-y: hidden; /* avoid scrollbar jitter with animating heights */