• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Sunday, 28 May, 2023
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Hướng dẫn

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

Custom Dropdown Menu with Flatsome UX Builder

Harris by Harris
23/03/2023
in Hướng dẫn, Website
Reading Time: 2 mins read
0
huanvmdotcom custom dropdown menu with flatsome ux builder
8
SHARES
24
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Đây là hướng dẫn trên trang sebdelaweb.com, có tiêu đề Custom Dropdown Menu with Flatsome UX Builder. Mình lưu lại để tiện sử dụng về sau. Nếu bạn đang cần và quan tâm có thể dùng thử cách tạo Mega Menu tuỳ chỉnh nhanh gọn trong hướng dẫn này.

Đây là Shortcode dán vào UX Block:

ShortCode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
[row label="CSS* UX Menu: Callout" style="collapse" v_align="equal" padding="20px 20px 20px 20px" class="ux-menu-callout"]
[col span="7" span__sm="12" span__md="12"]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/bag.png" pos="left" margin="0px 0px 30px 0px" icon_border="4" icon_color="rgb(229, 206, 143)" link="/flatsome-assets/"]
<h4>Shop now</h4>
<p>Video tutorials & guides </p>
[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/percentage.png" pos="left" margin="0px 0px 30px 0px" icon_border="4" icon_color="rgb(180, 105, 106)" link="/flatsome-custom-styling/"]
<h4>We love Sale</h4>
<p> Enjoy the latest deals</p>
[/featured_box]
[featured_box img="https://www.sebdelaweb.com/wp-content/uploads/fashion.png" pos="left" margin="0px 0px 20px 0px" icon_border="4" icon_color="rgb(34, 39, 74)" link="/sebs-showcase-with-flatsome-website-examples/"]
<h4>Shop the look</h4>
<p> Inspired by the latest trends</p>
[/featured_box]
[/col]
[col span="5" span__sm="12" span__md="12" bg_color="rgb(250, 250, 250)"]
[ux_sidebar]
[/col]
[/row]

Đây là CSS dán vào style hoặc Custom CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
/*************** UX MENU ***************/
.ux-menu .nav-dropdown {
    min-width: 600px;
    padding: 0px;
}
.ux-megamenu .nav-dropdown {
    min-width: 100vw;
    padding: 0px;
}
.ux-megamenu li.menu-item {
    width:100%;
}
.container .ux-megamenu .row:not(.row-collapse) {
    margin-left: auto;
    margin-right: auto;
}
/*************** UX MENU - CALLOUT  ***************/
.ux-menu-callout a {
    color:#000; /* Change nav color */
}
.ux-menu-callout a:hover, .ux-menu-callout a:hover h4   {
    color:#000; /* Change nav hover color */
}
.ux-menu-callout .icon-box .has-icon-bg .icon .icon-inner {
    background-color: currentColor; /* Auto fill background with icon color */
}
.ux-menu-callout .nav-dropdown .menu-item-has-children>a {
    text-transform: none; /* Text transform parent links */
    font-size: 100%;
}
.ux-menu-callout span.widget-title {
    text-transform: uppercase;
    font-size:80%;
    letter-spacing: .05em;
opacity: 0.8;
}
.ux-menu-callout ul.menu>li ul {
    border-left: 0px;
    padding: 0px 0px 10px 10px;
}
.ux-menu-callout .icon-box-text {
    padding-top: 5px;
}
.ux-menu-callout h4 {
    margin-bottom: 0px;
}
.ux-menu-callout p {
    font-size:80%;
}
.ux-menu-callout .widget .is-divider {
    margin: 5px 0px;
opacity: 0;
}
.ux-menu-callout .widget {
    margin-bottom: 0px;
}

Theo dõi video này để dễ hình dung hơn:

Nguồn bài viết thuộc về: https://www.sebdelaweb.com/custom-dropdown-menu-with-flatsome-ux-builder/

Digiprove sealCopyright protected by Digiprove © 2023
Rate this post
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 26Tạm được 23
Previous Post

Hướng dẫn fix lỗi Error message: Blacklisted domain trên CyberPanel

Next Post

WooCommerce Hooks Guide: Full List and Examples

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
WooCommerce Hooks Guide: Full List and Examples

WooCommerce Hooks Guide: Full List and Examples

Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

KHUYÊN DÙNG

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

23/03/2023
24
Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

28/12/2022
80

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

28/12/2022
7k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

30/12/2022
2.1k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
2.2k
Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

Tạo file Feed sản phẩm Woocommerce theo chuẩn Google Shopping

05/03/2022
287
Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

Code hiển thị đếm ngược khuyến mại và sản phẩm đã bán trên Woocommerce

28/12/2022
80

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Mẫu contact form 7 đơn giản và đẹp

Mẫu contact form 7 đơn giản và đẹp

26/05/2023
WooCommerce Hooks Guide: Full List and Examples

WooCommerce Hooks Guide: Full List and Examples

10/05/2023
Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

Hướng dẫn tạo Mega Menu tuỳ chỉnh trên Flatsome

23/03/2023

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
0
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi