Tất cả bài viết, Thủ thuật wordpress

Hướng dẫn làm menu đa cấp cho Flatsome

Đăng vào Tháng 2 19, 2025Tháng 2 19, 2025 bởi admin

admin

19/02/2025

1 Phút đọc

33 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Hôm nay MUATHEMEGIAGIE sẽ Hướng dẫn làm menu đa cấp cho Flatsome, css cho menu có đa cấp trong flatsome dạng dọc:

Thêm css sau vào menu Flatsome > Advanced > Custom CSS > All Screens

@media (min-width: 850px){
    header#header .nav-dropdown {
        display: block;
    }
    header#header .nav-dropdown ul.sub-menu {
        position: absolute;
        left: 100%;
        top: 0;
        background: #fff;
        width: 250px;
        padding: 0;
        display: none !important;
        border-radius: 5px;
        -webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
        box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);
    }
    header#header .nav-dropdown ul.sub-menu a {
        white-space: normal;
        margin: 0;
        padding: 10px 15px;
        border: 0;
        font-weight: 400;
    }
    header#header .nav-dropdown li:hover > ul.sub-menu{
        display: block !important;
    }
    header#header .nav-dropdown li {
        border-right: 0;
        white-space: normal;
        width: 100%;
        display: block;
        position: relative;
    }
    header#header .nav-dropdown li.menu-item-has-children > a {
        font-weight: 400;
        text-transform: none;
        color: rgba(102,102,102,.85);
    }
    header#header .nav-dropdown li.active>a {
        color: #e82c2a;
    }
}
// https://muathemewpgiare.com

@media (min-width: 850px){

header#header .nav-dropdown {

display: block;

}

header#header .nav-dropdown ul.sub-menu {

position: absolute;

left: 100%;

top: 0;

background: #fff;

width: 250px;

padding: 0;

display: none !important;

border-radius: 5px;

-webkit-box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);

box-shadow: 1px 1px 15px rgb(0 0 0 / 15%);

}

header#header .nav-dropdown ul.sub-menu a {

white-space: normal;

margin: 0;

padding: 10px 15px;

border: 0;

font-weight: 400;

}

header#header .nav-dropdown li:hover > ul.sub-menu{

display: block !important;

}

header#header .nav-dropdown li {

border-right: 0;

white-space: normal;

width: 100%;

display: block;

position: relative;

}

header#header .nav-dropdown li.menu-item-has-children > a {

font-weight: 400;

text-transform: none;

color: rgba(102,102,102,.85);

}

header#header .nav-dropdown li.active>a {

color: #e82c2a;

}

// https://muathemewpgiare.com

MUATHEMEGIARE đã chia sẽ css cho các bạn, mình chúc các bạn thành công.

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Hướng dẫn cách Chặn Index Subpages Trong WordPress Để Tối Ưu SEO

Trong quá trình làm SEO cho website WordPress, việc để các subpages (trang con của phân trang) bị Google index có thể gây ra vấn...
Hướng dẫn cách vô hiệu hóa WooCommerce Brands để tăng tốc độ

Tắt tính năng WooCommerce Brands (CSS brands-styles-css) để giúp website tải nhanh hơn Tại sao cần tắt WooCommerce Brands? Từ phiên bản WooCommerce 9.6 trở...
$Rank Math SEO CSS có ảnh hưởng đến tăng tốc độ load? Cách loại bỏ Rank Math SEO CSS để tăng tốc độ load$

Rank Math SEO CSS có ảnh hưởng đến tăng tốc độ load? Cách loại bỏ Rank Math SEO CSS để tăng tốc độ load

Tìm hiểu về Rank Math Rank Math là gì? Rank Math là một plugin SEO dành cho WordPress, giúp tối ưu hóa nội dung và...
Hướng dẫn tạo tài khoản Admin WordPress thông qua theme

Vì một lý do nào đó, bạn có thể bị mất quyền truy cập vào tài khoản Admin WordPress của mình. Nếu không am hiểu...
Hướng dẫn redirect(Điều hướng) về trang cũ sau khi đăng nhập trong WooCommerce

Bạn đã gặp những tình trạng như thế này chưa? Khi mua sắm trực tuyến trên các nền tảng như Shopee, Lazada hay Tiki, có...
Sharecode Hướng Dẫn Tạo Shortcode Kiểm Tra Đơn Hàng Trong WordPress

Nếu bạn đang sử dụng WooCommerce và muốn khách hàng dễ dàng kiểm tra trạng thái đơn hàng của họ ngay trên website, hãy sử...
Bạn có biết gì về Meta Keyword trong SEO

Meta Keywords là một khái niệm quen thuộc trong lĩnh vực SEO, đặc biệt là khi tối ưu Onpage. Trước đây, thẻ Meta Keywords từng...
Hướng dẫn sửa lỗi widget lọc sản phẩm theo giá không hiển thị

Một khách hàng sử dụng theme Paradise gần đây đã liên hệ để nhờ hỗ trợ về việc widget lọc sản phẩm theo giá (Filter...
Bạn Có Thắc Mắc Về Việc Tôi Kiếm Tiền Từ Blog MUATHEMEWPGIARE?

Tôi đã làm gì để kiếm tiền từ blog? Kiếm tiền từ blog là một hành trình đầy thử thách nhưng cũng rất hấp dẫn...
Các Plugin nén ảnh tốt nhất cho Website WordPress

Hình ảnh là yếu tố quan trọng giúp nâng cao trải nghiệm người dùng, xây dựng thương hiệu và hỗ trợ các chiến dịch quảng...
Hướng dẫn sử dụng Flatsome Studio

Flatsome Studio là một công cụ mạnh mẽ có sẵn trên tất cả các trang, bài đăng và khối mà UX Builder hỗ trợ. Nó...
Hướng dẫn code chức năng xem đủ thời gian để hiển thị nội dung trong wordpress

Giới thiệu Trong một số trường hợp, bạn muốn người dùng đọc bài viết đủ 30 giây hoặc một khoảng thời gian nhất định rồi...
Hướng Dẫn Tạo Chức Năng Gửi Link Tải Về Qua Email Trong WordPress

Trong bài viết này, chúng ta sẽ xây dựng một chức năng cho phép người dùng tải về một file hoặc tài liệu sau khi...
10 Plugins cần thiết nhất dành cho blog/ website WordPress

Khi xây dựng một blog hoặc website WordPress, việc lựa chọn plugin phù hợp giúp tối ưu hiệu suất, bảo mật và trải nghiệm người...
Hướng dẫn cách loại bỏ Auto Sizes CSS trên WordPress 6.7

Giới Thiệu Về Auto Sizes CSS Trên WordPress 6.7 Từ phiên bản WordPress 6.7, một đoạn mã CSS inline đã được tích hợp vào mã...
Hướng Dẫn CSS Đánh Giá Bài Viết WordPress Cực Đẹp

Hướng Dẫn CSS Đánh Giá Bài Viết WordPress Cực Đẹp – Bạn đã bao giờ nhìn thấy phần đánh giá sản phẩm trên website của...