Mặc định Elementor không hỗ trợ tạo slide menu (menu ngang cuộn) trên mobile. Khi chuyển sang giao diện mobile, menu navigation thường bị chuyển sang dạng hamburger menu hoặc các item bị xếp thành nhiều dòng, trông không đẹp và chiếm nhiều diện tích màn hình. Slide menu là giải pháp hoàn hảo: các item menu nằm trên một hàng ngang duy nhất và người dùng có thể vuốt (swipe) sang trái/phải để xem thêm các mục. Trong bài viết này, mình sẽ hướng dẫn bạn cách tạo slide menu trên mobile cho Elementor một cách nhanh chóng chỉ bằng CSS.

Tại sao cần Slide menu trên mobile?

Khi thiết kế website responsive, menu navigation là một trong những thành phần quan trọng nhất nhưng cũng dễ gặp vấn đề nhất trên mobile. Nếu website của bạn có nhiều mục menu (5-7 item trở lên), khi hiển thị trên màn hình mobile, các item sẽ bị xuống dòng hoặc bị thu nhỏ đến mức khó bấm. Slide menu giải quyết vấn đề này bằng cách:

1. Giữ menu trên một hàng ngang duy nhất, tiết kiệm không gian

2. Người dùng có thể vuốt (swipe) để xem thêm mục menu

3. Trải nghiệm giống ứng dụng mobile native, quen thuộc với người dùng

4. Giữ nguyên cấu trúc menu gốc, không cần chỉnh sửa lại menu

Đây là kỹ thuật đặc biệt hữu ích cho các trang web tin tức, blog, hoặc shop online có nhiều danh mục sản phẩm.

Hướng dẫn tạo Slide menu trên mobile với Elementor

Phương pháp này sử dụng CSS flexbox với thuộc tính overflow-x: auto để tạo hiệu ứng cuộn ngang cho menu. Bạn không cần cài thêm plugin nào, chỉ cần thêm class CSS và một đoạn CSS ngắn.

Bước 1: Thêm CSS Class cho widget Menu

Mở trang bạn muốn chỉnh sửa bằng Elementor, chọn widget Nav Menu (hoặc Header element chứa menu). Chuyển sang tab Advanced, tìm mục CSS Classes và nhập bunnywp_menu.

Lưu ý: Nếu bạn đang dùng Elementor Header Builder, hãy chọn widget Nav Menu trong header template. Nếu dùng theme builder của Bricks, Flatsome, hoặc GeneratePress, hãy thêm class này vào container chứa menu.

Bước 2: Thêm CSS Custom

Thêm đoạn CSS sau vào Custom CSS của Elementor (Page Settings > Advanced > Custom CSS) hoặc vào Site Settings > Custom CSS nếu bạn muốn áp dụng toàn site:

/**
 * Slide menu trên mobile cho Elementor
 * Áp dụng CSS flexbox + overflow-x để tạo hiệu ứng cuộn ngang
 */
@media screen and (max-width: 768px) {
    .bunnywp_menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu {
        display: flex;
        flex-wrap: nowrap;       /* Ngăn các item xuống dòng */
        white-space: nowrap;     /* Ngăn text bị ngắt dòng */
        overflow-x: auto;        /* Hiện thanh cuộn ngang khi quá rộng */
        -webkit-overflow-scrolling: touch; /* Cuộn mượt trên iOS */
        -ms-overflow-style: none; /* Ẩn thanh cuộn trên IE/Edge */
        scrollbar-width: none;   /* Ẩn thanh cuộn trên Firefox */
    }
    
    /* Ẩn thanh cuộn trên Chrome/Safari */
    .bunnywp_menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu::-webkit-scrollbar {
        display: none;
    }
}

Đó là kết quả. Giờ đây trên màn hình mobile, menu của bạn sẽ hiển thị trên một hàng ngang và người dùng có thể vuốt để xem thêm các mục menu.

Giải thích chi tiết từng thuộc tính CSS

@media screen and (max-width: 768px): Media query đảm bảo CSS chỉ áp dụng trên màn hình mobile. Giá trị 768px là breakpoint phổ biến giữa tablet và desktop. Bạn có thể điều chỉnh giá trị này tùy theo thiết kế của bạn (ví dụ 480px cho mobile nhỏ, 1024px cho tablet).

display: flex: Thiết lập container sử dụng Flexbox, cho phép kiểm soát chính xác cách các item được sắp xếp.

flex-wrap: nowrap: Ngăn các item menu xuống dòng mới khi không đủ không gian. Đây là thuộc tính quan trọng nhất để tạo slide menu.

white-space: nowrap: Ngăn text bên trong mỗi item menu bị ngắt dòng, đảm bảo mỗi item nằm trọn trên một dòng.

overflow-x: auto: Hiện thanh cuộn ngang khi nội dung vượt quá chiều rộng container, cho phép người dùng cuộn để xem thêm nội dung.

-webkit-overflow-scrolling: touch: Tạo hiệu ứng cuộn mượt mà (momentum scrolling) trên các thiết bị iOS. Không có thuộc tính này, cuộn trên iPhone/iPad sẽ bị giật.

Ẩn thanh scrollbar: Các dòng CSS ẩn thanh cuộn trên Chrome/Safari (::-webkit-scrollbar), Firefox (scrollbar-width: none), và IE/Edge (-ms-overflow-style: none). Thanh cuộn trông không đẹp trên mobile nên việc ẩn nó giúp giao diện sạch sẽ hơn.

Tùy chỉnh nâng cao cho Slide menu

Thêm indicator khi có nhiều mục menu

Để người dùng biết còn có thêm mục menu phía bên phải, bạn có thể thêm hiệu ứng gradient fade ở mép phải:

/**
 * Thêm gradient fade ở mép phải để báo hiệu còn nhiều mục
 */
@media screen and (max-width: 768px) {
    .bunnywp_menu {
        position: relative;
    }
    .bunnywp_menu::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 40px;
        height: 100%;
        background: linear-gradient(to right, transparent, white);
        pointer-events: none; /* Không ảnh hưởng đến tương tác */
    }
}

Hiệu ứng gradient này tạo một vùng mờ dần ở mép phải của menu, giúp người dùng nhận biết còn nội dung phía bên phải có thể cuộn đến.

Tùy chỉnh khoảng cách giữa các item

/**
 * Tùy chỉnh spacing cho slide menu
 */
@media screen and (max-width: 768px) {
    .bunnywp_menu .elementor-nav-menu--layout-horizontal .elementor-nav-menu > li {
        padding: 8px 16px;   /* Khoảng cách giữa các item */
        flex-shrink: 0;      /* Ngăn item bị thu nhỏ */
    }
}

Thuộc tính flex-shrink: 0 đảm bảo mỗi item menu giữ nguyên kích thước, không bị thu nhỏ để nhét vào màn hình. Đây là thuộc tính quan trọng để slide menu hoạt động đúng.

Cuộn tự động đến item hiện tại

Bạn có thể thêm JavaScript để tự động cuộn đến item menu đang active khi trang load:

// Cuộn tự động đến menu item đang active
jQuery(document).ready(function($) {
    var $activeItem = $('.bunnywp_menu .current-menu-item');
    if ($activeItem.length) {
        var menu = $activeItem.closest('.elementor-nav-menu')[0];
        if (menu) {
            var itemLeft = $activeItem.position().left;
            var scrollLeft = menu.scrollLeft + itemLeft - 20;
            menu.scrollTo({ left: scrollLeft, behavior: 'smooth' });
        }
    }
});

Đoạn JavaScript này tìm item menu có class current-menu-item (item đang active) và tự động cuộn menu để item đó nằm trong vùng nhìn thấy. Bạn có thể thêm đoạn JS này vào Elementor qua mục Page Settings > Advanced > Custom JS hoặc dùng plugin WPCode.

Các phương pháp thay thế

1. Dùng Off-Canvas Menu (Side Menu): Thay vì slide menu ngang, bạn có thể tạo menu drawer trượt ra từ mép trái/phải màn hình. Elementor Pro có sẵn widget Menu Toggle kết hợp với Container để tạo off-canvas menu. Cách này phù hợp khi bạn có rất nhiều mục menu và muốn giao diện mobile gọn gàng tối đa.

2. Dùng plugin Mega Menu: Các plugin như HeroMenu, Max Mega Menu có hỗ trợ responsive menu với nhiều kiểu hiển thị mobile. Nếu bạn cần menu phức tạp với nhiều cấp dropdown, đây là giải pháp phù hợp.

3. Dùng Elementor Pro Nav Menu với Dropdown: Nếu menu của bạn có thể gom thành các nhóm dropdown, chỉ cần hiển thị 3-4 item chính trên mobile và phần còn lại nằm trong dropdown. Cách này đơn giản nhất nhưng giới hạn số item hiển thị.

Troubleshooting

1. Menu vẫn xuống dòng trên mobile: Kiểm tra xem CSS selector có đúng không. Nếu bạn dùng version Elementor mới, cấu trúc class có thể thay đổi. Hãy dùng Developer Tools (F12) để kiểm tra class thực tế của menu element.

2. Thanh cuộn vẫn hiển thị: Đảm bảo bạn đã thêm đủ các dòng CSS ẩn scrollbar cho tất cả trình duyệt. Nếu vẫn thấy thanh cuộn trên một số thiết bị, thử thêm overflow-x: scroll thay vì auto.

3. Cuộn bị giật trên iOS: Nếu cuộn không mượt trên iPhone/iPad, đảm bảo bạn có -webkit-overflow-scrolling: touch trong CSS. Trên iOS 13 trở lên, thuộc tính này đã được tự động áp dụng nhưng vẫn nên giữ lại để tương thích ngược.

4. CSS không áp dụng trên mobile: Đảm bảo bạn đã dùng đúng breakpoint. Nếu website của bạn có breakpoint khác 768px, hãy thay đổi giá trị trong media query. Hãy test bằng Developer Tools (F12 > Toggle Device Toolbar) để xác nhận.

Tổng kết

Slide menu trên mobile là một kỹ thuật CSS đơn giản nhưng mang lại trải nghiệm người dùng tuyệt vời. Chỉ với một class CSS và một đoạn CSS ngắn sử dụng flexbox, bạn đã biến menu navigation mặc định thành slide menu mượt mà, giống như ứng dụng mobile native. Kỹ thuật này không cần plugin, không cần JavaScript (bản cơ bản), và hoạt động tốt trên mọi trình duyệt và thiết bị. Hãy áp dụng thử cho website Elementor của bạn và cảm nhận sự khác biệt! Tham khảo thêm: Cách tạo column có thể click được trong Elementor.