[Tip hay Flatsome]OT Flatsome Vertical Menu làm menu dọc cực hay cho Flatsome

[Tip hay Flatsome]OT Flatsome addon làm menu dọc cực hay cho Flatsome

Nếu có bạn nào muốn làm menu dọc thì tìm đúng cái rồi đấy. OT Flatsome là một addon rất mạnh trong việc tạo và thêm icon menu cho Flatsome. Trong bản thông báo của Flatsome thì chỉ có Ubermenu – Plugin tính phí được flatsome đưa ra để tương thích với việc tùy biến, thêm mới menu. Tuy nhiên, ở VN, các anh em làm Flatsome cũng có thể tạo ra một sản phẩm ngon không kém mà còn Free. Hiện tại Plugin OT Flatsome addon cũng có bản tính phí với  tính năng Megamenu và thêm shortcode để chèn tùy ý vào các vị trí.

Có phải bạn nào cũng xài bản có phí được đâu. Còn tùy vào điều kiện. Hôm nay em sẽ hướng dẫn các bạn xài bản Free nhưng đủ chức năng dùng.

[Tip hay Flatsome]OT Flatsome Vertical Menu làm menu dọc cực hay cho Flatsome
[Tip hay Flatsome]OT Flatsome Vertical Menu làm menu dọc cực hay cho Flatsome

Hướng dẫn sử dụng OT Flatsome Vertical Menu

Các bạn cứ xài theo quy chuẩn thôi. Vào Plugin/Cài mới. Gõ OT Flatsome Vertical Menu và cài đặt. Chờ hoàn tất rồi kích hoạt.

Để sử dụng, bạn vào phần Tùy biến/Header.

Trên phần Header, nó sẽ có phần Vertical menu đỏ. Bạn kéo nó xuống vị trí cần đặt. Lưu lại.

Bây giờ sẽ đến phần tạo menu. Các bạn sẽ tạo menu danh mục sản phẩm, hoặc danh mục ngành hàng, dịch vụ của mình. Rồi thêm vào menu như bình thường.

Chú ý: Trong phần tạo menu, bạn chú ý thêm phần ICON như hình dưới đây. Nhấp vào Select để lựa chọn.

icon OT Flatsome Vertical Menu
icon OT Flatsome Vertical Menu

Mục Icon này có nhiều tùy chọn. Các bạn có thể sử dụng hình ảnh SVG, font Awesome, …

Tùy nhu cầu và khả năng mà các bạn có thể chọn một loại phù hợp là được. Ở đây mình hay dùng ảnh png nên mình tích vào Image. Khi nhấp Select và chọn hình ảnh chèn vào. Nó sẽ hiện trên ngay menu hình ảnh bạn chọn (Có thumbnail). Sau đó lưu lại. Và tận hưởng thành quả thôi.

Vì cái mặc định của thằng OT Flatsome Vertical Menu có cái chiều rộng menu dọc hơi bị dài. Với lại không cho phép chỉnh màu nền với bản Free này. Dưới đây mình có đoạn code cho các bạn chỉnh sửa.

#mega-menu-title {
  width: 250px;
}
#mega_menu a:hover {
  width: 250px;
}
#menu-item-716.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-716 {
  width: 245px;
}
#mega_menu.sf-menu.sf-vertical.sf-js-enabled.sf-arrows {
  width: 250px;
}
#mega-menu-wrap.ot-vm-hover {
  width: 0px;
}
.nav.header-nav.header-bottom-nav.nav-center.nav-uppercase {
  left: -80px;
}
Cứ copy y nguyên như trên vào Custom CSS rồi lưu lại. Phần code này đã giải quyết hết các phần co lại gồm submenu của menu dọc và cả phần co lại của menu ngang ngay bên cạnh cho hiển thị bắt mắt.
Có vấn đề gì cứ comment ngay dưới nhé. Cảm ơn các bạn đã ghé thăm web.

Leave a Reply

avatar
  Subscribe  
Notify of
Hotline: 0974.0707.83(Zalo/Viber)