Side Panel (Off-Canvas Menu)

Side Panel Settings Guide

Configure the slide-out navigation panel that appears on the left side of your site. The Side Panel provides quick access to navigation menus and is perfect for mobile users and sites with extensive navigation.

Side Panel Settings

Side panel configuration in the Customizer

What Is the Side Panel?

The Side Panel is a slide-out menu that appears from the left side of your screen. Think of it as a navigation drawer similar to mobile apps. It can contain custom menus, widgets, or any navigation items you want quick access to.

What You Can Do

  • Show or hide the side panel
  • Set it to open or closed by default
  • Display different menus for logged-in and logged-out users
  • Enable or disable on mobile devices
  • Add custom navigation with icons
  • Control visibility on specific pages
  • Toggle the panel with a button click

Visual Overview

CLOSED STATE:                     OPEN STATE:

┌──┐                             ┌──────────┬──────────┐
│  │                             │          │          │
│ ☰│  Header                     │  Menu    │  Header  │
│  │                             │  Item 1  │          │
├──┤                             │  Item 2  │──────────┤
│  │                             │  Item 3  │          │
│  │  Main Content               │  Item 4  │  Main    │
│  │                             │  Item 5  │  Content │
│  │                             │          │          │
│  │                             │          │          │
└──┘                             └──────────┴──────────┘
 ↑                                    ↑
Toggle button                    Panel slides in from left
(3 horizontal lines)             Click outside to close

Side Panel Settings

Access these settings in Appearance → Customize → Site Side Panel.

Available Options

SettingDefaultDescription
Default StateClosedPanel starts open or closed on page load
Toggle ButtonEnabledShow/hide the button that opens the panel
Logout ModeEnabledShow panel to logged-out users
Mobile ViewEnabledShow panel on mobile devices

Setting Details

Default State

Controls how the panel appears when a page loads.

Options:

  • Closed (recommended) – Panel hidden, users click to open
  • Open – Panel visible immediately

When to use “Open”:

  • Sites with primary navigation in panel
  • Dashboard-style layouts
  • Wide screens where panel doesn’t cover content

When to use “Closed”:

  • Content-focused sites
  • Mobile-responsive layouts
  • Sites where content is primary

Toggle Button

The button that opens and closes the panel.

Enabled:

  • Three-line “hamburger” icon appears
  • Usually in header area
  • Click to open/close panel

Disabled:

  • No toggle button shown
  • Users can’t open panel
  • Useful if you have custom triggers

Logout Mode

Controls panel visibility for logged-out users.

Enabled (default):

  • Logged-out users see the panel
  • Displays “Logged-Out Menu” if set
  • Falls back to main menu

Disabled:

  • Panel hidden for logged-out users
  • Only logged-in users see it
  • Good for member-only navigation

Mobile View

Controls panel on small screens (under 768px).

Enabled (default):

  • Panel works on mobile devices
  • Great for mobile navigation
  • Touch-friendly interface

Disabled:

  • Panel hidden on mobile
  • Mobile users see standard menu
  • Use if you have separate mobile menu

How to Configure Side Panel

Step 1: Enable the Side Panel

  1. Log in to WordPress dashboard
  2. Go to Appearance → Customize
  3. Navigate to Site Side Panel
  4. Ensure Toggle Button is enabled
  5. Click Publish

Step 2: Set Default State

Choose how the panel appears on load:

  1. In Site Side Panel settings
  2. Find Default State option
  3. Select Open or Closed
  4. Click Publish

Most sites work best with “Closed” as default.

Step 3: Configure User Visibility

Control who sees the panel:

For all users (default):

  • Keep Logout Mode enabled
  • Panel shows to everyone

For logged-in users only:

  • Disable Logout Mode
  • Panel hidden for guests

Step 4: Set Mobile Behavior

Choose mobile visibility:

Mobile-friendly (recommended):

  • Keep Mobile View enabled
  • Panel works on phones/tablets

Desktop-only:

  • Disable Mobile View
  • Mobile users see different menu

Side Panel Menus

The Side Panel displays custom navigation menus. You can set different menus for logged-in and logged-out users.

Menu Locations

BuddyX Pro provides dedicated menu locations:

Menu LocationWho Sees ItBest For
BuddyX Panel – Logged in usersLogged-in membersDashboard, profile, settings
BuddyX Panel – Logged out usersGuests/visitorsLogin, register, about

Create a Side Panel Menu

Step 1: Create the Menu

  1. Go to Appearance → Menus
  2. Click Create a new menu
  3. Name it (e.g., “Side Panel Menu”)
  4. Click Create Menu

Step 2: Add Menu Items

Add pages, posts, or custom links:

  1. Select items from left column
  2. Click Add to Menu
  3. Drag to reorder items
  4. Create submenus by dragging items right

Step 3: Assign to Location

  1. Check BuddyX Panel – Logged in users box
  2. Or check BuddyX Panel – Logged out users
  3. Click Save Menu

Menu with Icons

Add icons to side panel menu items for better visual navigation:

Using Menu Icons Plugin

  1. Install “Menu Icons” plugin
  2. Go to Appearance → Menus
  3. Open your side panel menu
  4. Click triangle to expand menu item
  5. Choose icon from icon picker
  6. Save menu

Icon Libraries Supported

  • Font Awesome
  • Dashicons
  • Genericons
  • Custom SVG icons

Customize Panel Content

Default Content

By default, the panel shows:

  • Navigation menu items
  • Submenu items (expandable)
  • Icon + text labels

Custom Content with Hooks

Developers can add custom content:

// Add content before menu
add_action( 'buddyx_before_inner_panel', 'custom_panel_content' );

// Add content after menu
add_action( 'buddyx_after_inner_panel', 'custom_panel_footer' );

Per-Page Panel Control

Hide the panel on specific pages:

  1. Edit the page in WordPress
  2. Scroll to Side Panel Settings meta box
  3. Check Hide Side Panel
  4. Update the page

This is useful for:

  • Landing pages
  • Checkout pages
  • Full-screen presentations
  • Login/registration pages

Recommended Menu Configurations by Site Type

Community Site (BuddyPress)

Logged-in Menu:

  • Dashboard
  • My Profile
  • Messages
  • Notifications
  • Friends
  • Groups
  • Activity
  • Members
  • Settings

Logged-out Menu:

  • Home
  • About
  • Login
  • Register
  • Features
  • Contact

E-Commerce Site (WooCommerce)

Logged-in Menu:

  • Shop
  • My Account
  • Orders
  • Wishlist
  • Cart
  • Checkout

Logged-out Menu:

  • Shop
  • Categories
  • Sale
  • New Arrivals
  • Login/Register
  • About

Learning Site (LearnDash/LearnPress)

Logged-in Menu:

  • My Courses
  • All Courses
  • My Progress
  • Certificates
  • Assignments
  • Profile
  • Support

Logged-out Menu:

  • Browse Courses
  • Course Categories
  • Instructors
  • Pricing
  • Login
  • Enroll Now

Membership Site

Logged-in Menu:

  • Dashboard
  • My Account
  • Members Area
  • Downloads
  • Support
  • Community
  • Settings
  • Logout

Logged-out Menu:

  • Home
  • Membership Levels
  • Benefits
  • Testimonials
  • FAQ
  • Login
  • Join Now

Corporate/Business Site

Main Menu:

  • Home
  • About Us
  • Services
  • Products
  • Resources
  • Blog
  • Careers
  • Contact

User Experience Best Practices

Do’s

  • Keep menu items concise
  • Use clear, descriptive labels
  • Organize items logically
  • Add icons for visual clarity
  • Limit to 8-10 main items
  • Use submenus for organization
  • Test on mobile devices

Don’ts

  • Don’t overcrowd with items
  • Don’t use long menu labels
  • Don’t nest menus too deeply (max 2 levels)
  • Don’t forget mobile testing
  • Don’t hide critical navigation
  • Don’t use unclear terminology

Mobile Optimization

Mobile Behavior

On mobile devices (when enabled):

  1. Touch-Friendly:
  2. Full-Screen:
  3. Scrollable:

Mobile Best Practices

For mobile panels:

  • Use shorter menu labels
  • Add recognizable icons
  • Limit menu depth (1-2 levels)
  • Place important items at top
  • Test on actual devices
  • Consider thumb reach

Desktop vs. Mobile

FeatureDesktopMobile
Width280-320px80-90% screen width
OverlaySemi-transparentDarker overlay
Close MethodClick outside or buttonSwipe or tap outside
ScrollingIndependent scrollIndependent scroll
AnimationSlide in/outSlide in/out

Styling and Appearance

Panel Styling

The side panel inherits your theme colors:

  • Background: Site background color
  • Text: Site text color
  • Links: Theme link color
  • Hover: Theme hover color

Custom Styling

To customize appearance with CSS:

  1. Create a child theme
  2. Add custom CSS to child theme stylesheet
  3. Target .buddyx-menu-panel class

Example CSS:

/* Change panel background */
.buddyx-menu-panel {
    background-color: #f5f5f5;
}

/* Style menu items */
.buddyx-menu-panel .menu-item a {
    padding: 15px 20px;
    border-bottom: 1px solid #ddd;
}

/* Icon styling */
.buddyx-menu-panel .menu-item-icon {
    margin-right: 10px;
}

Width Adjustment

Default panel width is 320px on desktop. To change:

.buddyx-menu-panel {
    width: 400px;
}

Troubleshooting

Panel Doesn’t Open

Check these items:

  1. Toggle enabled
  2. Menu assigned
  3. JavaScript errors
  4. Logout mode

Toggle Button Not Visible

Possible causes:

  1. Toggle disabled – Enable in customizer
  2. CSS conflict – Another plugin may hide it
  3. Custom header – May override button placement
  4. Cache issue – Clear all caches

Solutions:

  • Check customizer settings
  • Disable conflicting plugins
  • Clear cache
  • Update theme

Panel Appears Behind Content

This indicates a CSS z-index conflict:

  1. Open browser developer tools (F12)
  2. Inspect the panel element
  3. Note the z-index value
  4. Add custom CSS to increase it

Example fix:

.buddyx-menu-panel {
    z-index: 9999 !important;
}

Menu Items Not Showing

Verify:

  1. Menu created – Menu exists in Appearance → Menus
  2. Location set – Menu assigned to panel location
  3. Items added – Menu has items
  4. Not hidden – Menu visibility settings
  5. Cache cleared – Clear all caches

Panel Won’t Close

Possible causes:

  1. JavaScript error
  2. Theme conflict
  3. Plugin conflict
  4. Browser issue

Try:

  • Check browser console for errors
  • Disable plugins one-by-one
  • Test in different browser
  • Update theme and plugins

Different Menu Shows in Panel

The panel shows different menus based on:

  1. Login state – Logged in vs. logged out
  2. Menu location – Check menu assignments
  3. Fallback – Primary menu shows if panel menu not set

Solution:

  • Verify correct menu is assigned
  • Check for both logged-in and logged-out locations
  • Assign menus to specific locations

Advanced Configuration

Hide Panel on Specific Pages

Use the per-page setting:

  1. Edit page in WordPress
  2. Find Side Panel Settings meta box
  3. Check Hide Side Panel
  4. Update page

Or use custom CSS with page IDs:

/* Hide on specific page */
.page-id-123 .buddyx-menu-panel {
    display: none !important;
}

/* Hide toggle on specific page */
.page-id-123 .buddyx-panel-toggle {
    display: none !important;
}

Change Panel Position

By default, panel slides in from left. To change to right:

This requires custom CSS and JavaScript. Consider using a child theme or consulting a developer.

Add Custom Widgets to Panel

While the panel is primarily for menus, developers can add widgets:

// Register widget area for panel
register_sidebar( array(
    'name'          => 'Side Panel Widgets',
    'id'            => 'buddyx-panel-widgets',
    'before_widget' => '<div class="panel-widget">',
    'after_widget'  => '</div>',
) );

// Display in panel
add_action( 'buddyx_after_inner_panel', function() {
    dynamic_sidebar( 'buddyx-panel-widgets' );
} );

Common Questions

What’s the difference between Side Panel and mobile menu?

Side Panel:

  • Slides in from left
  • Can show on desktop and mobile
  • Custom menu location
  • Always accessible

Mobile Menu:

  • Appears in header on mobile
  • Different menu location
  • Only on small screens
  • Collapses on desktop

You can use both simultaneously.

Can I have different panels for different user roles?

Not by default, but you can:

  1. Use a plugin like “Nav Menu Roles”
  2. Show/hide menu items by role
  3. Create role-specific menus

Does the panel work with page builders?

Yes! The panel is independent of page content. It works with:

  • WordPress Block Editor
  • Elementor
  • Beaver Builder
  • Divi Builder
  • Other page builders

Can I disable the panel completely?

Yes, three ways:

  1. Disable toggle – In customizer, turn off Toggle Button
  2. Don’t assign menu – Leave menu locations empty
  3. Use CSS – Hide with display: none

How many menu items can I add?

There’s no hard limit, but best practices:

Recommended:

  • 8-10 main items
  • 1-2 submenu levels
  • Total items: 15-20

Not recommended:

  • 20+ main items
  • 3+ submenu levels
  • Very long labels

Will the panel slow down my site?

No, the side panel is lightweight and optimized:

  • Minimal CSS/JavaScript
  • Only loads when enabled
  • No external dependencies
  • No impact on page speed scores

Can visitors see the panel?

Yes, if Logout Mode is enabled. This lets you show navigation to non-logged-in visitors. You can:

  • Show same menu to everyone
  • Show different menu to logged-out users
  • Hide panel from logged-out users completely

Related Settings

Need Help?

If you need assistance with the side panel:

Documentation:

  • BuddyX Pro theme documentation
  • WordPress menu guide
  • Navigation best practices

Support:

Useful Plugins:

  • Menu Icons – Add icons to menus
  • Nav Menu Roles – Control menu by user role
  • Max Mega Menu – Advanced menu features
Last updated: January 31, 2026