Chào các bạn đọc, nhiều người (bao gồm cả tôi) đã sử dụng theme Flatsome để xây dựng website với những ưu điểm rất lớn như dễ tùy biến, trình dựng trang kéo thả và dễ sử dụng cho nhiều đối tượng, kể cả những người không rành code. Tuy nhiên, có một số điểm mặc định trên giao diện của theme Flatsome không được đẹp và cần phải được tối ưu lại cho phù hợp với gu thị hiếu của người dùng tại Việt Nam. Trong bài viết này, tôi sẽ hướng dẫn các bạn cách sửa giao diện menu di động trong theme Flatsome bằng CSS.
Bước 1: Tùy chỉnh kiểu hiển thị cho menu di động
Trước tiên, chúng ta sẽ quyết định kiểu hiển thị cho menu di động. Để làm điều này, các bạn vào Giao diện – Tùy biến – Header – Header Mobile Menu/Overlay.
Ở hình trên, chúng ta sẽ lần lượt điều chỉnh các mục từ 1 đến 5 nhé!
- Mục 1: Cho phép vị trí của logo nằm ở giữa hoặc ở lề trái.
- Mục 2: Cho phép tùy chỉnh icon của menu. Chúng ta có thể chọn 1 trong 5 kiểu khác nhau.
- Mục 3: Nếu bạn chọn, tiêu đề của menu sẽ hiển thị bên trong menu overlay.
- Mục 4: Bạn được phép chọn 1 trong 3 kiểu hiển thị menu di động: ở lề trái, ở lề phải hoặc phủ toàn bộ màn hình.
- Mục 5: Mục này quan trọng nhất, cho phép bạn thêm hoặc bớt nội dung vào menu di động. Bạn có thể ẩn hoặc hiển thị các đối tượng bằng cách nhấp vào biểu tượng mắt ở lề trái. Thông thường, tôi chỉ cho hiển thị Main menu thôi. Lưu ý: Nếu không sử dụng Woocommerce, hãy tắt “Cart” và “Account”.
Bước 2: Sửa giao diện menu di động trong theme Flatsome bằng CSS
Tiếp theo, chúng ta sẽ sửa giao diện menu di động trong theme Flatsome bằng CSS. Điều này rất đơn giản đối với những người không biết gì về code, vì bạn chỉ cần copy và paste đoạn mã CSS vào đúng vị trí mà tôi hướng dẫn.
Các bạn vào: Giao diện – Tùy biến – Style – Custom Mobile CSS, rồi paste toàn bộ đoạn code dưới đây vào.
.off-canvas-left.mfp-ready .mfp-content {
background-color: rgb(37, 142, 0);
}
.off-canvas:not(.off-canvas-center) .nav-vertical li > a {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
text-transform: none;
font-size: 16px;
color: white;
}
.off-canvas:not(.off-canvas-center) .nav-vertical li ul {
padding-bottom: 0;
background: #1a6300;
}
.off-canvas:not(.off-canvas-center) .nav-vertical li ul li {
border-bottom: 1px solid #226f07;
}
.icon-angle-down:before {
color: #8BC34A;
}
Đó là đoạn mã CSS có thể làm thay đổi hoàn toàn giao diện menu di động. Bạn chỉ cần thay đổi mã màu cho phù hợp với tông màu chủ đạo của bạn là xong.
Lời kết
Cảm ơn các bạn đã quan tâm và theo dõi bài viết này. Hy vọng rằng thông qua hướng dẫn này, bạn có thêm những trải nghiệm thú vị khi xây dựng website. Nếu bạn gặp bất kỳ vấn đề gì, hãy để lại comment và tôi sẽ hướng dẫn bạn.
Nguồn: giuseart.com