How to Customize WordPress Menus with Dropdowns, Icons, and Mega Menus (wppioneer.com)

01-nav-cta-button.css

/* Target the <li> that has the custom class you added in the menu editor */
.nav-cta a {
    background-color: #0073aa;
    color: #ffffff !important;
    padding: 8px 20px;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.2s ease;
    display: inline-block;
}

.nav-cta a:hover {
    background-color: #005a87;
    color: #ffffff !important;
    text-decoration: none;
}

/* Prevent the active/current-page class from changing the button appearance */
.nav-cta.current-menu-item a,
.nav-cta.current-page-ancestor a {
    background-color: #0073aa;
}

02-dashicon-menu-icons.css

/*
 * Inject Dashicons into WordPress menu items using CSS pseudo-elements.
 * Add the custom class (e.g. "menu-icon-home") to the menu item in the editor,
 * then target it here. The font-family must match the Dashicons font declaration.
 *
 * Full Unicode reference: https://developer.wordpress.org/resource/dashicons/
 */

/* Load Dashicons font if not already loaded by the theme */
@font-face {
    font-family: "dashicons";
    src: url(/wp-includes/fonts/dashicons.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

/* Home icon (Unicode f107) */
.menu-icon-home > a::before {
    font-family: "dashicons";
    content: "\f107";
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

/* About / person icon (Unicode f110) */
.menu-icon-about > a::before {
    font-family: "dashicons";
    content: "\f110";
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

/* Contact / email icon (Unicode f466) */
.menu-icon-contact > a::before {
    font-family: "dashicons";
    content: "\f466";
    margin-right: 5px;
    font-size: 18px;
    vertical-align: middle;
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

03-mobile-menu-breakpoint.css

/*
 * Override the mobile menu breakpoint for a theme-specific navigation container.
 * Replace .main-navigation with the actual class your theme uses.
 * Use browser DevTools to inspect your header and find the correct selector.
 */

/* Hide hamburger / show full desktop nav above 900px */
@media (min-width: 901px) {
    .main-navigation .menu-toggle {
        display: none;
    }
    .main-navigation .nav-menu {
        display: flex;
    }
}

/* Show hamburger / hide full nav at 900px and below */
@media (max-width: 900px) {
    .main-navigation .menu-toggle {
        display: block;
    }
    .main-navigation .nav-menu {
        display: none;
    }
    /* When menu is open (JS adds .toggled class to the nav container) */
    .main-navigation.toggled .nav-menu {
        display: block;
        width: 100%;
    }
    /* Stack sub-menus vertically on mobile */
    .main-navigation ul ul {
        position: static;
        float: none;
        box-shadow: none;
        padding-left: 1.5em;
    }
}

04-menu-item-badge.css

/*
 * Add a "New" badge to a menu item using CSS pseudo-elements.
 * Add the class "menu-badge-new" (or similar) to the target menu item in the editor.
 * The badge is purely presentational — it does not affect screen reader output.
 */

.menu-badge-new {
    position: relative;
}

.menu-badge-new > a::after {
    content: "New";
    position: absolute;
    top: 0;
    right: -8px;
    transform: translateY(-50%);
    background: #e74c3c;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    padding: 3px 5px;
    border-radius: 3px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

/* "Sale" variant — orange badge */
.menu-badge-sale > a::after {
    content: "Sale";
    background: #f39c12;
}

/* "Hot" variant — red-orange badge */
.menu-badge-hot > a::after {
    content: "Hot";
    background: #e67e22;
}