I’ll build this as a powerful, self-contained template-parts/header/mega-menu.php template for your RX Theme, with accessibility, mobile support, mega panels, icons, badges, descriptions, thumbnails, CTA areas, search, and fallback behavior.
Yes friend, in rx-theme/template-parts/header/mega-menu.php you can make an advanced mega menu template. Paste this full code into:
rx-theme/template-parts/header/mega-menu.phpThen call it from header.php like this:
<?php get_template_part( 'template-parts/header/mega-menu' ); ?><?php
/**
* RX Theme Advanced Mega Menu
*
* File: template-parts/header/mega-menu.php
*
* Features:
* - WordPress native menu support
* - Mega menu support by CSS class
* - Dropdown menu
* - Multi-column mega panel
* - Mobile off-canvas menu
* - Keyboard accessible menu
* - ARIA attributes
* - Search button and search form
* - Menu descriptions
* - Menu badges by CSS class
* - Menu icons by CSS class
* - Featured menu items
* - CTA button area
* - Login / account links
* - WooCommerce cart support
* - Dark overlay for mobile menu
* - Fallback menu if no menu exists
*
* Recommended menu item CSS classes:
*
* rx-mega = turn top-level item into mega menu
* rx-mega-2 = 2 column mega menu
* rx-mega-3 = 3 column mega menu
* rx-mega-4 = 4 column mega menu
* rx-mega-full = full-width mega panel
* rx-badge-new = show NEW badge
* rx-badge-hot = show HOT badge
* rx-badge-pro = show PRO badge
* rx-featured = featured/highlight menu item
* rx-hide-mobile = hide item on mobile
* rx-hide-desktop = hide item on desktop
* rx-icon-home = home icon
* rx-icon-health = health icon
* rx-icon-blog = blog icon
* rx-icon-contact = contact icon
* rx-icon-service = service icon
* rx-icon-download = download icon
*/
defined( 'ABSPATH' ) || exit;
if ( ! class_exists( 'RX_Advanced_Mega_Menu_Walker' ) ) :
class RX_Advanced_Mega_Menu_Walker extends Walker_Nav_Menu {
/**
* Current top level item classes.
*
* @var array
*/
protected $current_top_classes = array();
/**
* Starts the list before the elements are added.
*/
public function start_lvl( &$output, $depth = 0, $args = null ) {
$indent = str_repeat( "\t", $depth );
if ( 0 === $depth ) {
$is_mega = in_array( 'rx-mega', $this->current_top_classes, true );
$is_full = in_array( 'rx-mega-full', $this->current_top_classes, true );
$column_count = $this->get_column_count( $this->current_top_classes );
if ( $is_mega ) {
$output .= "\n$indent<div class=\"rx-mega-panel" . ( $is_full ? ' rx-mega-panel-full' : '' ) . "\" role=\"region\" aria-label=\"" . esc_attr__( 'Mega menu panel', 'rx-theme' ) . "\">\n";
$output .= "$indent\t<div class=\"rx-mega-inner rx-container\">\n";
$output .= "$indent\t\t<ul class=\"rx-sub-menu rx-mega-grid rx-mega-columns-" . esc_attr( $column_count ) . "\" role=\"menu\">\n";
} else {
$output .= "\n$indent<ul class=\"rx-sub-menu rx-dropdown-menu\" role=\"menu\">\n";
}
} else {
$output .= "\n$indent<ul class=\"rx-sub-menu rx-nested-dropdown\" role=\"menu\">\n";
}
}
/**
* Ends the list of after the elements are added.
*/
public function end_lvl( &$output, $depth = 0, $args = null ) {
$indent = str_repeat( "\t", $depth );
if ( 0 === $depth && in_array( 'rx-mega', $this->current_top_classes, true ) ) {
$output .= "$indent\t\t</ul>\n";
$output .= "$indent\t\t" . $this->get_mega_cta_html() . "\n";
$output .= "$indent\t</div>\n";
$output .= "$indent</div>\n";
} else {
$output .= "$indent</ul>\n";
}
}
/**
* Starts the element output.
*/
public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
$indent = $depth ? str_repeat( "\t", $depth ) : '';
$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'rx-menu-item';
$classes[] = 'rx-menu-item-depth-' . (int) $depth;
if ( 0 === $depth ) {
$this->current_top_classes = $classes;
$classes[] = 'rx-top-menu-item';
}
if ( in_array( 'menu-item-has-children', $classes, true ) ) {
$classes[] = 'rx-has-children';
}
if ( in_array( 'rx-mega', $classes, true ) && 0 === $depth ) {
$classes[] = 'rx-has-mega-menu';
}
if ( in_array( 'rx-featured', $classes, true ) ) {
$classes[] = 'rx-featured-menu-item';
}
$class_names = implode( ' ', array_filter( array_map( 'sanitize_html_class', $classes ) ) );
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$item_id = 'rx-menu-item-' . (int) $item->ID;
$output .= $indent . '<li id="' . esc_attr( $item_id ) . '"' . $class_names . ' role="none">';
$atts = array();
$atts['title'] = ! empty( $item->attr_title ) ? $item->attr_title : '';
$atts['target'] = ! empty( $item->target ) ? $item->target : '';
$atts['rel'] = ! empty( $item->xfn ) ? $item->xfn : '';
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
$atts['class'] = 'rx-menu-link';
if ( 0 === $depth ) {
$atts['class'] .= ' rx-top-menu-link';
}
if ( in_array( 'menu-item-has-children', $classes, true ) ) {
$atts['aria-haspopup'] = 'true';
$atts['aria-expanded'] = 'false';
}
$atts['role'] = 'menuitem';
if ( '_blank' === $atts['target'] && empty( $atts['rel'] ) ) {
$atts['rel'] = 'noopener noreferrer';
}
$atts = apply_filters( 'rx_mega_menu_link_attributes', $atts, $item, $args, $depth );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
$value = 'href' === $attr ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . esc_attr( $attr ) . '="' . $value . '"';
}
}
$title = apply_filters( 'the_title', $item->title, $item->ID );
$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
$item_output = isset( $args->before ) ? $args->before : '';
$item_output .= '<a' . $attributes . '>';
$item_output .= '<span class="rx-menu-link-inner">';
$item_output .= $this->get_icon_html( $classes );
$item_output .= '<span class="rx-menu-text-wrap">';
$item_output .= '<span class="rx-menu-title">' . esc_html( $title ) . '</span>';
if ( ! empty( $item->description ) ) {
$item_output .= '<span class="rx-menu-description">' . esc_html( $item->description ) . '</span>';
}
$item_output .= '</span>';
$item_output .= $this->get_badge_html( $classes );
if ( in_array( 'menu-item-has-children', $classes, true ) ) {
$item_output .= '<span class="rx-menu-arrow" aria-hidden="true">▾</span>';
}
$item_output .= '</span>';
$item_output .= '</a>';
if ( in_array( 'menu-item-has-children', $classes, true ) ) {
$item_output .= '<button class="rx-submenu-toggle" type="button" aria-label="' . esc_attr__( 'Open submenu', 'rx-theme' ) . '" aria-expanded="false">';
$item_output .= '<span aria-hidden="true">+</span>';
$item_output .= '</button>';
}
$item_output .= isset( $args->after ) ? $args->after : '';
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
}
/**
* Ends the element output.
*/
public function end_el( &$output, $item, $depth = 0, $args = null ) {
$output .= "</li>\n";
}
/**
* Get mega menu column count.
*/
protected function get_column_count( $classes ) {
if ( in_array( 'rx-mega-2', $classes, true ) ) {
return 2;
}
if ( in_array( 'rx-mega-3', $classes, true ) ) {
return 3;
}
if ( in_array( 'rx-mega-4', $classes, true ) ) {
return 4;
}
if ( in_array( 'rx-mega-5', $classes, true ) ) {
return 5;
}
return 4;
}
/**
* Menu icon HTML by CSS class.
*/
protected function get_icon_html( $classes ) {
$icon_map = array(
'rx-icon-home' => '⌂',
'rx-icon-health' => '✚',
'rx-icon-blog' => '✎',
'rx-icon-contact' => '☎',
'rx-icon-service' => '⚙',
'rx-icon-download' => '⇩',
'rx-icon-star' => '★',
'rx-icon-user' => '👤',
'rx-icon-search' => '⌕',
'rx-icon-news' => '📰',
);
foreach ( $icon_map as $class => $icon ) {
if ( in_array( $class, $classes, true ) ) {
return '<span class="rx-menu-icon" aria-hidden="true">' . esc_html( $icon ) . '</span>';
}
}
return '';
}
/**
* Menu badge HTML by CSS class.
*/
protected function get_badge_html( $classes ) {
$badge_map = array(
'rx-badge-new' => __( 'New', 'rx-theme' ),
'rx-badge-hot' => __( 'Hot', 'rx-theme' ),
'rx-badge-pro' => __( 'Pro', 'rx-theme' ),
'rx-badge-free' => __( 'Free', 'rx-theme' ),
'rx-badge-update' => __( 'Updated', 'rx-theme' ),
'rx-badge-popular' => __( 'Popular', 'rx-theme' ),
);
foreach ( $badge_map as $class => $badge ) {
if ( in_array( $class, $classes, true ) ) {
return '<span class="rx-menu-badge ' . esc_attr( $class ) . '">' . esc_html( $badge ) . '</span>';
}
}
return '';
}
/**
* Mega menu CTA area.
*/
protected function get_mega_cta_html() {
$show_cta = apply_filters( 'rx_mega_menu_show_cta', true );
if ( ! $show_cta ) {
return '';
}
$cta_title = get_theme_mod( 'rx_mega_cta_title', __( 'Explore RX Health Library', 'rx-theme' ) );
$cta_text = get_theme_mod( 'rx_mega_cta_text', __( 'Read simple, evidence-based medical guides written for better health understanding.', 'rx-theme' ) );
$cta_url = get_theme_mod( 'rx_mega_cta_url', home_url( '/' ) );
$cta_btn = get_theme_mod( 'rx_mega_cta_button_text', __( 'Start Reading', 'rx-theme' ) );
ob_start();
?>
<div class="rx-mega-cta">
<div class="rx-mega-cta-content">
<strong class="rx-mega-cta-title"><?php echo esc_html( $cta_title ); ?></strong>
<span class="rx-mega-cta-text"><?php echo esc_html( $cta_text ); ?></span>
</div>
<a class="rx-mega-cta-button" href="<?php echo esc_url( $cta_url ); ?>">
<?php echo esc_html( $cta_btn ); ?>
</a>
</div>
<?php
return ob_get_clean();
}
}
endif;
$rx_menu_location = apply_filters( 'rx_mega_menu_location', 'primary' );
if ( ! has_nav_menu( $rx_menu_location ) && has_nav_menu( 'main-menu' ) ) {
$rx_menu_location = 'main-menu';
}
if ( ! has_nav_menu( $rx_menu_location ) && has_nav_menu( 'header-menu' ) ) {
$rx_menu_location = 'header-menu';
}
$rx_show_search = apply_filters( 'rx_mega_menu_show_search', true );
$rx_show_account = apply_filters( 'rx_mega_menu_show_account', true );
$rx_show_cart = apply_filters( 'rx_mega_menu_show_cart', true );
$rx_show_cta = apply_filters( 'rx_mega_menu_show_header_cta', true );
$rx_cta_url = get_theme_mod( 'rx_header_cta_url', home_url( '/' ) );
$rx_cta_text = get_theme_mod( 'rx_header_cta_text', __( 'Get Started', 'rx-theme' ) );
$rx_logo_text = get_bloginfo( 'name' );
$rx_mobile_label = __( 'Open main menu', 'rx-theme' );
?>
<nav class="rx-mega-navigation"
id="rxMegaNavigation"
aria-label="<?php echo esc_attr__( 'Main navigation', 'rx-theme' ); ?>"
itemscope
itemtype="https://schema.org/SiteNavigationElement">
<div class="rx-mega-nav-inner rx-container">
<div class="rx-menu-brand">
<?php if ( has_custom_logo() ) : ?>
<a class="rx-menu-logo-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" aria-label="<?php echo esc_attr( $rx_logo_text ); ?>">
<?php the_custom_logo(); ?>
</a>
<?php else : ?>
<a class="rx-menu-site-title" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php echo esc_html( $rx_logo_text ); ?>
</a>
<?php endif; ?>
</div>
<button class="rx-mobile-menu-toggle"
type="button"
aria-controls="rxMegaMenuWrapper"
aria-expanded="false"
aria-label="<?php echo esc_attr( $rx_mobile_label ); ?>">
<span class="rx-toggle-line"></span>
<span class="rx-toggle-line"></span>
<span class="rx-toggle-line"></span>
</button>
<div class="rx-mega-menu-wrapper" id="rxMegaMenuWrapper">
<div class="rx-mobile-menu-header">
<strong class="rx-mobile-menu-title"><?php echo esc_html( $rx_logo_text ); ?></strong>
<button class="rx-mobile-menu-close" type="button" aria-label="<?php echo esc_attr__( 'Close menu', 'rx-theme' ); ?>">
×
</button>
</div>
<?php
if ( has_nav_menu( $rx_menu_location ) ) {
wp_nav_menu(
array(
'theme_location' => $rx_menu_location,
'container' => false,
'menu_class' => 'rx-primary-menu',
'menu_id' => 'rxPrimaryMenu',
'fallback_cb' => false,
'depth' => 4,
'walker' => new RX_Advanced_Mega_Menu_Walker(),
)
);
} else {
?>
<ul class="rx-primary-menu rx-fallback-menu" id="rxPrimaryMenu">
<li class="rx-menu-item rx-top-menu-item">
<a class="rx-menu-link rx-top-menu-link" href="<?php echo esc_url( home_url( '/' ) ); ?>">
<span class="rx-menu-title"><?php esc_html_e( 'Home', 'rx-theme' ); ?></span>
</a>
</li>
<?php
$rx_pages = get_pages(
array(
'sort_column' => 'menu_order,post_title',
'number' => 6,
)
);
foreach ( $rx_pages as $rx_page ) :
?>
<li class="rx-menu-item rx-top-menu-item">
<a class="rx-menu-link rx-top-menu-link" href="<?php echo esc_url( get_permalink( $rx_page->ID ) ); ?>">
<span class="rx-menu-title"><?php echo esc_html( get_the_title( $rx_page->ID ) ); ?></span>
</a>
</li>
<?php
endforeach;
?>
</ul>
<?php
}
?>
<div class="rx-mobile-extra">
<?php if ( $rx_show_search ) : ?>
<form class="rx-mobile-search-form" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="rx-mobile-search-field">
<?php esc_html_e( 'Search for:', 'rx-theme' ); ?>
</label>
<input id="rx-mobile-search-field"
type="search"
name="s"
value="<?php echo esc_attr( get_search_query() ); ?>"
placeholder="<?php echo esc_attr__( 'Search articles...', 'rx-theme' ); ?>">
<button type="submit"><?php esc_html_e( 'Search', 'rx-theme' ); ?></button>
</form>
<?php endif; ?>
</div>
</div>
<div class="rx-menu-actions">
<?php if ( $rx_show_search ) : ?>
<button class="rx-header-search-toggle"
type="button"
aria-controls="rxHeaderSearchPanel"
aria-expanded="false"
aria-label="<?php echo esc_attr__( 'Open search', 'rx-theme' ); ?>">
<span aria-hidden="true">⌕</span>
</button>
<?php endif; ?>
<?php if ( $rx_show_account ) : ?>
<?php if ( is_user_logged_in() ) : ?>
<a class="rx-header-account-link" href="<?php echo esc_url( admin_url( 'profile.php' ) ); ?>">
<span aria-hidden="true">👤</span>
<span class="rx-action-text"><?php esc_html_e( 'Account', 'rx-theme' ); ?></span>
</a>
<?php else : ?>
<a class="rx-header-account-link" href="<?php echo esc_url( wp_login_url( get_permalink() ) ); ?>">
<span aria-hidden="true">👤</span>
<span class="rx-action-text"><?php esc_html_e( 'Login', 'rx-theme' ); ?></span>
</a>
<?php endif; ?>
<?php endif; ?>
<?php if ( $rx_show_cart && class_exists( 'WooCommerce' ) && function_exists( 'WC' ) ) : ?>
<a class="rx-header-cart-link" href="<?php echo esc_url( wc_get_cart_url() ); ?>">
<span aria-hidden="true">🛒</span>
<span class="rx-cart-count">
<?php echo esc_html( WC()->cart ? WC()->cart->get_cart_contents_count() : 0 ); ?>
</span>
</a>
<?php endif; ?>
<?php if ( $rx_show_cta ) : ?>
<a class="rx-header-cta" href="<?php echo esc_url( $rx_cta_url ); ?>">
<?php echo esc_html( $rx_cta_text ); ?>
</a>
<?php endif; ?>
</div>
</div>
<?php if ( $rx_show_search ) : ?>
<div class="rx-header-search-panel" id="rxHeaderSearchPanel" hidden>
<div class="rx-container">
<form class="rx-header-search-form" role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label class="screen-reader-text" for="rx-header-search-field">
<?php esc_html_e( 'Search for:', 'rx-theme' ); ?>
</label>
<input id="rx-header-search-field"
type="search"
name="s"
value="<?php echo esc_attr( get_search_query() ); ?>"
placeholder="<?php echo esc_attr__( 'Search medical articles, health guides, diseases...', 'rx-theme' ); ?>">
<button type="submit">
<?php esc_html_e( 'Search', 'rx-theme' ); ?>
</button>
<button class="rx-header-search-close" type="button" aria-label="<?php echo esc_attr__( 'Close search', 'rx-theme' ); ?>">
×
</button>
</form>
</div>
</div>
<?php endif; ?>
<div class="rx-mobile-menu-overlay" hidden></div>
</nav>
<style>
.rx-mega-navigation {
position: relative;
z-index: 999;
background: #fff;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.rx-container {
width: min(1200px, calc(100% - 32px));
margin-inline: auto;
}
.rx-mega-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 72px;
gap: 24px;
}
.rx-menu-brand {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.rx-menu-logo-link,
.rx-menu-site-title {
display: inline-flex;
align-items: center;
text-decoration: none;
font-weight: 800;
font-size: 24px;
color: inherit;
}
.rx-menu-site-title:hover {
text-decoration: none;
}
.rx-mega-menu-wrapper {
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
}
.rx-primary-menu,
.rx-sub-menu {
list-style: none;
margin: 0;
padding: 0;
}
.rx-primary-menu {
display: flex;
align-items: center;
gap: 4px;
}
.rx-menu-item {
position: relative;
}
.rx-menu-link {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 14px;
color: #1f2937;
text-decoration: none;
border-radius: 10px;
line-height: 1.2;
transition: background .2s ease, color .2s ease, transform .2s ease;
}
.rx-menu-link:hover,
.rx-menu-link:focus {
background: rgba(37, 99, 235, .08);
color: #1d4ed8;
outline: none;
}
.rx-menu-link-inner {
display: inline-flex;
align-items: center;
gap: 8px;
width: 100%;
}
.rx-menu-text-wrap {
display: flex;
flex-direction: column;
gap: 3px;
}
.rx-menu-title {
font-weight: 700;
font-size: 15px;
}
.rx-menu-description {
font-size: 12px;
color: #6b7280;
max-width: 220px;
}
.rx-menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border-radius: 999px;
background: rgba(37, 99, 235, .08);
color: #2563eb;
font-size: 13px;
flex: 0 0 auto;
}
.rx-menu-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
padding: 2px 7px;
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: .02em;
background: #ef4444;
color: #fff;
}
.rx-badge-new {
background: #16a34a;
}
.rx-badge-hot {
background: #ef4444;
}
.rx-badge-pro {
background: #7c3aed;
}
.rx-badge-free {
background: #0284c7;
}
.rx-badge-update,
.rx-badge-popular {
background: #f59e0b;
color: #111827;
}
.rx-menu-arrow {
font-size: 12px;
margin-left: 2px;
transition: transform .2s ease;
}
.rx-has-children:hover > .rx-menu-link .rx-menu-arrow,
.rx-has-children:focus-within > .rx-menu-link .rx-menu-arrow {
transform: rotate(180deg);
}
.rx-dropdown-menu,
.rx-mega-panel {
position: absolute;
top: 100%;
left: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(12px);
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
background: #fff;
box-shadow: 0 20px 60px rgba(15,23,42,.14);
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
}
.rx-dropdown-menu {
min-width: 260px;
padding: 10px;
}
.rx-nested-dropdown {
position: absolute;
top: 0;
left: 100%;
min-width: 240px;
padding: 10px;
background: #fff;
box-shadow: 0 20px 60px rgba(15,23,42,.14);
border: 1px solid rgba(0,0,0,.08);
border-radius: 18px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(10px);
transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.rx-has-children:hover > .rx-dropdown-menu,
.rx-has-children:focus-within > .rx-dropdown-menu,
.rx-has-children:hover > .rx-mega-panel,
.rx-has-children:focus-within > .rx-mega-panel,
.rx-has-children:hover > .rx-nested-dropdown,
.rx-has-children:focus-within > .rx-nested-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
.rx-has-children:hover > .rx-nested-dropdown,
.rx-has-children:focus-within > .rx-nested-dropdown {
transform: translateX(0);
}
.rx-mega-panel {
left: 50%;
transform: translate(-50%, 12px);
width: min(1100px, calc(100vw - 32px));
padding: 0;
overflow: hidden;
}
.rx-has-children:hover > .rx-mega-panel,
.rx-has-children:focus-within > .rx-mega-panel {
transform: translate(-50%, 0);
}
.rx-mega-panel-full {
width: calc(100vw - 32px);
}
.rx-mega-inner {
padding: 24px;
}
.rx-mega-grid {
display: grid;
gap: 10px;
}
.rx-mega-columns-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rx-mega-columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rx-mega-columns-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rx-mega-columns-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.rx-mega-panel .rx-menu-link {
align-items: flex-start;
padding: 14px;
border: 1px solid transparent;
}
.rx-mega-panel .rx-menu-link:hover,
.rx-mega-panel .rx-menu-link:focus {
border-color: rgba(37, 99, 235, .16);
background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(16,185,129,.08));
}
.rx-featured-menu-item > .rx-menu-link {
background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(16,185,129,.10));
border: 1px solid rgba(37,99,235,.15);
}
.rx-mega-cta {
margin-top: 18px;
padding: 18px;
border-radius: 18px;
background: linear-gradient(135deg, #eff6ff, #ecfdf5);
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.rx-mega-cta-content {
display: flex;
flex-direction: column;
gap: 4px;
}
.rx-mega-cta-title {
font-size: 16px;
color: #111827;
}
.rx-mega-cta-text {
font-size: 14px;
color: #4b5563;
}
.rx-mega-cta-button,
.rx-header-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 8px 16px;
border-radius: 999px;
background: #2563eb;
color: #fff;
text-decoration: none;
font-weight: 800;
white-space: nowrap;
}
.rx-mega-cta-button:hover,
.rx-header-cta:hover {
background: #1d4ed8;
color: #fff;
text-decoration: none;
}
.rx-menu-actions {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
}
.rx-header-search-toggle,
.rx-mobile-menu-toggle,
.rx-mobile-menu-close,
.rx-header-search-close,
.rx-submenu-toggle {
border: 0;
background: transparent;
cursor: pointer;
font: inherit;
color: inherit;
}
.rx-header-search-toggle,
.rx-header-account-link,
.rx-header-cart-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 40px;
min-height: 40px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(0,0,0,.04);
color: #111827;
text-decoration: none;
font-weight: 700;
}
.rx-header-search-toggle:hover,
.rx-header-account-link:hover,
.rx-header-cart-link:hover {
background: rgba(37, 99, 235, .08);
color: #1d4ed8;
}
.rx-cart-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 20px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 11px;
font-weight: 800;
}
.rx-header-search-panel {
border-top: 1px solid rgba(0,0,0,.08);
background: #fff;
padding: 16px 0;
}
.rx-header-search-form {
display: flex;
align-items: center;
gap: 10px;
}
.rx-header-search-form input,
.rx-mobile-search-form input {
width: 100%;
min-height: 44px;
border: 1px solid rgba(0,0,0,.15);
border-radius: 12px;
padding: 10px 14px;
font: inherit;
}
.rx-header-search-form button[type="submit"],
.rx-mobile-search-form button {
min-height: 44px;
border: 0;
border-radius: 12px;
padding: 10px 16px;
background: #2563eb;
color: #fff;
font-weight: 800;
cursor: pointer;
}
.rx-mobile-menu-toggle {
display: none;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(0,0,0,.05);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
}
.rx-toggle-line {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 999px;
}
.rx-mobile-menu-header,
.rx-mobile-extra,
.rx-submenu-toggle {
display: none;
}
.rx-hide-desktop {
display: none !important;
}
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
@media (max-width: 1024px) {
.rx-mobile-menu-toggle {
display: inline-flex;
}
.rx-mega-menu-wrapper {
position: fixed;
top: 0;
right: 0;
width: min(420px, 90vw);
height: 100vh;
background: #fff;
z-index: 1001;
display: block;
overflow-y: auto;
transform: translateX(105%);
transition: transform .25s ease;
box-shadow: -20px 0 60px rgba(15,23,42,.18);
}
body.rx-mobile-menu-open .rx-mega-menu-wrapper {
transform: translateX(0);
}
.rx-mobile-menu-overlay {
position: fixed;
inset: 0;
background: rgba(15,23,42,.55);
z-index: 1000;
}
body.rx-mobile-menu-open .rx-mobile-menu-overlay {
display: block;
}
.rx-mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px;
border-bottom: 1px solid rgba(0,0,0,.08);
}
.rx-mobile-menu-title {
font-size: 18px;
}
.rx-mobile-menu-close {
width: 40px;
height: 40px;
border-radius: 999px;
background: rgba(0,0,0,.06);
font-size: 24px;
line-height: 1;
}
.rx-primary-menu {
display: block;
padding: 12px;
}
.rx-menu-link {
padding: 14px 12px;
border-radius: 12px;
}
.rx-submenu-toggle {
display: inline-flex;
position: absolute;
top: 8px;
right: 8px;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border-radius: 999px;
background: rgba(0,0,0,.05);
font-weight: 800;
}
.rx-dropdown-menu,
.rx-nested-dropdown,
.rx-mega-panel {
position: static;
width: auto;
min-width: 0;
box-shadow: none;
border: 0;
border-radius: 0;
padding: 0;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
display: none;
background: transparent;
}
.rx-menu-item.rx-submenu-open > .rx-dropdown-menu,
.rx-menu-item.rx-submenu-open > .rx-nested-dropdown,
.rx-menu-item.rx-submenu-open > .rx-mega-panel {
display: block;
}
.rx-mega-inner {
width: 100%;
padding: 8px 0 8px 14px;
}
.rx-mega-grid,
.rx-mega-columns-2,
.rx-mega-columns-3,
.rx-mega-columns-4,
.rx-mega-columns-5 {
display: block;
}
.rx-mega-cta {
display: block;
margin: 12px;
}
.rx-mega-cta-button {
margin-top: 12px;
width: 100%;
}
.rx-menu-actions {
margin-left: auto;
}
.rx-action-text,
.rx-header-cta {
display: none;
}
.rx-mobile-extra {
display: block;
padding: 16px;
border-top: 1px solid rgba(0,0,0,.08);
}
.rx-mobile-search-form {
display: grid;
gap: 10px;
}
.rx-hide-mobile {
display: none !important;
}
.rx-hide-desktop {
display: block !important;
}
}
@media (max-width: 640px) {
.rx-container {
width: min(100% - 24px, 1200px);
}
.rx-mega-nav-inner {
min-height: 64px;
gap: 10px;
}
.rx-header-account-link {
display: none;
}
.rx-menu-site-title {
font-size: 20px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const body = document.body;
const nav = document.getElementById('rxMegaNavigation');
const menuWrapper = document.getElementById('rxMegaMenuWrapper');
const mobileToggle = nav ? nav.querySelector('.rx-mobile-menu-toggle') : null;
const mobileClose = nav ? nav.querySelector('.rx-mobile-menu-close') : null;
const overlay = nav ? nav.querySelector('.rx-mobile-menu-overlay') : null;
const submenuToggles = nav ? nav.querySelectorAll('.rx-submenu-toggle') : [];
const searchToggle = nav ? nav.querySelector('.rx-header-search-toggle') : null;
const searchPanel = document.getElementById('rxHeaderSearchPanel');
const searchClose = nav ? nav.querySelector('.rx-header-search-close') : null;
const searchInput = document.getElementById('rx-header-search-field');
function openMobileMenu() {
body.classList.add('rx-mobile-menu-open');
if (mobileToggle) {
mobileToggle.setAttribute('aria-expanded', 'true');
}
if (overlay) {
overlay.hidden = false;
}
if (menuWrapper) {
const firstLink = menuWrapper.querySelector('a, button, input');
if (firstLink) {
firstLink.focus();
}
}
}
function closeMobileMenu() {
body.classList.remove('rx-mobile-menu-open');
if (mobileToggle) {
mobileToggle.setAttribute('aria-expanded', 'false');
mobileToggle.focus();
}
if (overlay) {
overlay.hidden = true;
}
}
function openSearch() {
if (!searchPanel || !searchToggle) {
return;
}
searchPanel.hidden = false;
searchToggle.setAttribute('aria-expanded', 'true');
window.setTimeout(function () {
if (searchInput) {
searchInput.focus();
}
}, 50);
}
function closeSearch() {
if (!searchPanel || !searchToggle) {
return;
}
searchPanel.hidden = true;
searchToggle.setAttribute('aria-expanded', 'false');
searchToggle.focus();
}
if (mobileToggle) {
mobileToggle.addEventListener('click', openMobileMenu);
}
if (mobileClose) {
mobileClose.addEventListener('click', closeMobileMenu);
}
if (overlay) {
overlay.addEventListener('click', closeMobileMenu);
}
if (searchToggle) {
searchToggle.addEventListener('click', function () {
if (searchPanel && searchPanel.hidden) {
openSearch();
} else {
closeSearch();
}
});
}
if (searchClose) {
searchClose.addEventListener('click', closeSearch);
}
submenuToggles.forEach(function (button) {
button.addEventListener('click', function () {
const parent = button.closest('.rx-menu-item');
if (!parent) {
return;
}
const isOpen = parent.classList.toggle('rx-submenu-open');
button.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
button.innerHTML = '<span aria-hidden="true">' + (isOpen ? '−' : '+') + '</span>';
});
});
const parentLinks = nav ? nav.querySelectorAll('.rx-has-children > .rx-menu-link') : [];
parentLinks.forEach(function (link) {
link.addEventListener('focus', function () {
link.setAttribute('aria-expanded', 'true');
});
link.addEventListener('blur', function () {
window.setTimeout(function () {
const parent = link.closest('.rx-has-children');
if (parent && !parent.matches(':focus-within')) {
link.setAttribute('aria-expanded', 'false');
}
}, 100);
});
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
if (body.classList.contains('rx-mobile-menu-open')) {
closeMobileMenu();
}
if (searchPanel && !searchPanel.hidden) {
closeSearch();
}
}
});
window.addEventListener('resize', function () {
if (window.innerWidth > 1024 && body.classList.contains('rx-mobile-menu-open')) {
closeMobileMenu();
}
});
});
</script>To activate mega menu for any top menu item: go to WordPress Dashboard → Appearance → Menus → Screen Options → enable CSS Classes, then add classes like:
rx-mega rx-mega-4 rx-mega-fullFor badges/icons, add classes like:
rx-icon-health rx-badge-newBest useful class examples:
rx-mega rx-mega-4
rx-mega rx-mega-3 rx-mega-full
rx-icon-home
rx-icon-health
rx-icon-blog
rx-badge-new
rx-badge-hot
rx-featured
rx-hide-mobile
rx-hide-desktop