• Login
No Result
View All Result
  • All posts
  • Đời sống
  • Covid19
  • Chính trị
  • Kinh tế
  • Công nghệ
  • Sức khỏe
  • Thương hiệu
  • Cộng đồng mạng
  • Xe
  • Sức khỏe tình dục
  • Địa phương
  • Điểm Check In
  • bảng giá xe
  • Việc làm
  • Thiết kế website
  • Văn hóa
  • Giải trí
  • Sự kiện
  • Nông sản
  • Download
  • Thiết kế
  • Video
  • Ẩm thực
  • Toplist uy tín tại  Bắc Ninh
  • Nhà cửa
  • Hoa cây cảnh
  • Bầu bí
  • Thể thao
Home News

Cách chỉnh sửa CSS menu 3 cấp trên theme Flatsome

27/05/2021
in News, Thiết kế website
0 0
A A
0
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter
Có một thực tế là, menu cấp 2 của Flatsome là kiểu vertical 1 cột như bình thường, không vấn đề gì. Tuy nhiên, menu cấp 3 trở đi thì nó tự động chia nhiều cột bao gồm tên trình đơn menu và các sub-menu theo cột của nó. Việc chia cột như vậy cho cảm giác rất gọn gàng và khoa học đối với điều kiện tất cả các trình đơn menu đều có sub-menu. Ngược lại, dù chỉ 1 trong số các trình đơn menu không có sub-menu thì nó gần như là bị lỗi, và nó hiển thị cực kỳ xấu. Ví dụ như hình dưới đây:

Trong bài viết này, mình sẽ hướng dẫn các bạn sửa CSS để menu đa cấp của theme Flatsome có thể hiển thị đẹp hơn, hoặc cơ bản là làm cho nó hiển thị kiểu vertical menu như bình thường chúng ta hay sử dụng nhé!

Bài viết dựa trên kinh nghiệm và công việc thực tế, sử dụng theme Flatsome và WordPress 4.9.8. Do đó, bài hướng dẫn phù hợp 100% cho các bạn làm web sử dụng theme Flatsome. Còn những theme khác thì có vẻ như không hoạt động được!

Bước 1: Thêm CSS vào tùy chỉnh CSS của theme

Copy toàn bộ đoạn code CSS sau vào phần tùy chỉnh CSS của theme. Quản trị > Giao diện > Tùy chỉnh > Style > Custom CSS > Custom CSS:

.nav–dropdown>li.nav–dropdown–col{display:block}
.nav–dropdown{border:1px solid #ddd; padding:0}
.nav–dropdown .nav–dropdown–col>a, .nav–dropdown li a{font–weight:normal !important; text–transform:none !important;font–size:15px; font–weight:500}
.nav–dropdown .nav–dropdown–col>ul li:hover{background:#db0000}
.nav–dropdown–default>li:hover>a, .nav–dropdown .nav–dropdown–col>ul li:hover>a{color:white}
.nav–dropdown–default>li:hover{background:#fbae3c}
.nav–dropdown–default>li>a{border–bottom:0 !important}.nav–dropdown–has–arrow li.has–dropdown:before{border–width: 10px;
    margin–left: –10px;}
.nav–dropdown .nav–dropdown–col>ul{border: 1px solid #d2d2d2;margin-top:-40px;box-shadow: 2px 2px 5px #828282;display:none;position: absolute;
    left: 100%;z–index: 9;background: white;min–width: 240px;}
.nav–dropdown>li.nav–dropdown–col{width:100%;border–right:0}
.nav–dropdown .nav–dropdown–col>ul li a{padding:10px;  text–transform: none;color:black}
.header–nav li.nav–dropdown–col:hover >ul{display:block !important}

Trong đoạn code CSS trên, mình đã trang trí menu đa cấp cho theme Flatsome theo tông cam – đỏ. Do đó, nếu các bạn thấy ưng thì có thể dùng được luôn. Ngược lại, các bạn tìm sửa thuộc tính background:mã_màu trong phần mình đánh dấu dưới đây:

Màu vàng – mã màu khi rê chuột vào menu cấp 3. Màu xanh – mã màu khi rê chuột vào menu cấp 2

Trong đó:

Bạn nên xem thêm

Xem cách các con trẻ trả lời các câu này bạn sẽ nhân ra chúng ta đang áp đặt các con theo lối mòn cũ hay cần để trẻ tự do sáng tạo

Đã xuất hiện những doanh nghiệp Việt quy mô hàng tỷ USD tại Mỹ

  • Màu xanh: mã màu nền của trình đơn menu cấp 2 khi rê chuột vào.
  • Màu vàng: mã màu nền của trình đơn menu cấp 3 khi rê chuột vào.

Bước 2: Save Change

Các bạn Save Change/ Apply Change để xem thành quả nhé. Hy vọng các bạn làm đúng theo hướng dẫn và có thể sửa được sự khó chịu của menu cấp 3 trên theme Flatsome nhé! Chúc các bạn thành công.

Sản phẩm đã hoàn thiện sau khi sửa CSS menu đa cấp trên Flatsome

Theo: giuseart.com

How useful was this post?

Click on a star to rate it!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

ShareTweetShare
Previous Post

Khám phá vẻ đẹp mùa hoa gạo tháng 3

Next Post

Chỉnh Sửa Menu Mega của FlatSome Thành Menu 3 Cấp

Related Posts

Xem cách các con trẻ trả lời các câu này bạn sẽ nhân ra chúng ta đang áp đặt các con theo lối mòn cũ hay cần để trẻ tự do sáng tạo
News

Xem cách các con trẻ trả lời các câu này bạn sẽ nhân ra chúng ta đang áp đặt các con theo lối mòn cũ hay cần để trẻ tự do sáng tạo

20/09/2023
Đã xuất hiện những doanh nghiệp Việt quy mô hàng tỷ USD tại Mỹ
Kinh tế

Đã xuất hiện những doanh nghiệp Việt quy mô hàng tỷ USD tại Mỹ

19/09/2023
Dịch vụ in ấn tờ rơi tại Bắc Ninh đã trở thành một ngành công nghiệp
News

Dịch vụ in ấn tờ rơi tại Bắc Ninh đã trở thành một ngành công nghiệp

15/09/2023
 Cuộc hội đàm giữa Tổng thống Nga Vladimir Putin và nhà lãnh đạo Triều Tiên Kim Jong tại Sân bay vũ trụ Vostochny
News

 Cuộc hội đàm giữa Tổng thống Nga Vladimir Putin và nhà lãnh đạo Triều Tiên Kim Jong tại Sân bay vũ trụ Vostochny

15/09/2023
Ông Kim Jong-un thăm nhà máy máy bay Nga
Chính trị

Ông Kim Jong-un thăm nhà máy máy bay Nga

15/09/2023
Việt Nam – Trung Quốc khai thác chung thác Bản Giốc
News

Việt Nam – Trung Quốc khai thác chung thác Bản Giốc

15/09/2023
Apple Watch Series 9 với các tính năng mới
News

Apple Watch Series 9 với các tính năng mới

13/09/2023
Tuyên bố chung về nâng cấp quan hệ Việt Nam-Hoa Kỳ lên Đối tác chiến lược toàn diện
News

Tuyên bố chung về nâng cấp quan hệ Việt Nam-Hoa Kỳ lên Đối tác chiến lược toàn diện

12/09/2023
Load More
Next Post
Chỉnh Sửa Menu Mega của FlatSome Thành Menu 3 Cấp

Chỉnh Sửa Menu Mega của FlatSome Thành Menu 3 Cấp

Bắc Ninh Bắc Giang một thời

Bắc Ninh Bắc Giang một thời

5 bộ phim kinh dị của Việt Nam thành công và nên xem

5 bộ phim kinh dị của Việt Nam thành công và nên xem

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

https://www.youtube.com/watch?v=jKKZisB4QLA

Archives

Test Drive

Moto1
News

Lamborghini Grew Rapidly During Its First Decade

30/07/2023
Moto5
Comparison

Drag Race! Audi SQ7 Vs Porsche Panamera

26/07/2023
Moto9
Comparison

Lexus LC500 vs Honda Civic Type R | Top Gear: Series 25

22/07/2023
Moto1
Modification

Porsche Cayman: History Doesn’t Repeat, but It Rhymes

21/07/2023

Categories

  • Ẩm thực
  • bảng giá xe
  • Bầu bí
  • Chính trị
  • Comparison
  • Cộng đồng mạng
  • Công nghệ
  • Covid19
  • Doanh nhân doanh nghiệp
  • Download
  • Đánh giá xe
  • Địa phương
  • Điểm Check In
  • Đời sống
  • Được đề xuất
  • Giải trí
  • Gửi tiết kiệm
  • Hoa cây cảnh
  • Hosting
  • Hưng Yên
  • Khoa học
  • Kinh tế
  • Làm đẹp
  • Mê xe
  • Modification
  • News
  • Nghệ thuật ca hát
  • Nhà cửa
  • Nông sản
  • Pháp luật
  • Phim ảnh
  • Review
  • Sự kiện
  • Sức khỏe
  • Sức khỏe tình dục
  • Test Drive
  • Thể thao
  • Thiết kế
  • Thiết kế website
  • Thời trang
  • Thương hiệu
  • Toplist
  • Toplist uy tín tại  Bắc Ninh
  • Tư vấn xe
  • Ưu đãi Tên miền
  • Văn hóa
  • Video
  • Việc làm
  • Xe
© 2023 Kinh Bắc Web Blog's - Chuyên tư vấn thiết kế website xây dựng thương hiệu tại Bắc Ninh Kinh Bắc Web.

kartal escort kurtkoy escort pendik escort pendik escort pendik escort pendik escort sex hikaye backlink al backlink sales backlink satış backlink satış buy backlinks buy backlinks da pa sorgula free backlinks google rank checker google seo googlede üst sıraya çıkmak hacklink al hacklink nedir hacklink panel hacklink seo r57 shell search engine optimization seo SEO Tools seo uyumlu makale sitem kaçıncı sırada tanıtım yazısı pendik escort tuzla escort ataşehir escort Cialis 100 mg Cialis 100 mg cialis 100 mg Cialis 100 mg Cialis 100 mg 30 tablet Cialis 100 mg jel Cialis 100 mg orjinal satış sitesi Cialis 20 mg Cialis 20 mg Cialis 20 mg Cialis 20 mg Cialis 20 mg Cialis 5 mg Cialis 5 mg Cialis 5 mg Cialis 5 mg Cialis 5 mg 28 tablet cialis fiyat cialis fiyat cialis fiyat cialis fiyat cialis fiyat cialis fiyat Cialis fiyat 2023 cialis fiyatı Cialis fiyatları Cialis jel Cialis jel cialis jel Viagra 100 mg Viagra 100 mg Viagra 100 mg 30 tablet Viagra fiyat Viagra fiyat Viagra fiyat Viagra fiyat 2023 Viagra fiyat 2023 Viagra fiyatları Viagra krem Viagra satış sitesi Viagra satış sitesi adana escort adana escort bahis Bahis Siteleri Bedava Bonus Veren Bahis Siteleri bodrum vip transfer canlı bahis canlı sohbet hattı canlı sohbet hattı çeşme vip transfer Deneme Bonusu Veren Bahis Siteleri denizli escort eryaman escort eryaman escort fal hatları fal hattı gaziantep escort gaziantep escort gaziantep escort Hoşgeldin Bonusu Veren Bahis Siteleri kayseri escort mersin escort mersin escort sohbet hatları sohbet hatları sohbet hattı sohbet hattı telefonda fal holiganbet bahis bahis siteleri bedava bonus bedava bonus veren bahis siteleri canlı bahis canlı casino antalya escort eskişehir escort konya escort pendik escort da pa checker

No Result
View All Result
  • All posts
  • Đời sống
  • Covid19
  • Chính trị
  • Kinh tế
  • Công nghệ
  • Sức khỏe
  • Thương hiệu
  • Cộng đồng mạng
  • Xe
  • Sức khỏe tình dục
  • Địa phương
  • Điểm Check In
  • bảng giá xe
  • Việc làm
  • Thiết kế website
  • Văn hóa
  • Giải trí
  • Sự kiện
  • Nông sản
  • Download
  • Thiết kế
  • Video
  • Ẩm thực
  • Toplist uy tín tại  Bắc Ninh
  • Nhà cửa
  • Hoa cây cảnh
  • Bầu bí
  • Thể thao

© 2023 Kinh Bắc Web Blog's - Chuyên tư vấn thiết kế website xây dựng thương hiệu tại Bắc Ninh Kinh Bắc Web.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In