Download app

Quét mã QR để tải về ứng dụng

QR code

Cố định menu khi cuộn trang trong wordpress

20/08/2021, 02:58 pm
5,589

Bạn muốn menu của mình luôn cố định khi người dùng kéo trang trong wordpress. Hình thức này giúp cho khách dễ dàng di chuyển website của bạn và không còn mất thời gian để tìm thấy menu để chuyển sang mục khác. Làm thế nào để cố định menu khi cuộn trang trong wordpress, hãy cùng Nhân Hòa tìm hiểu ngay sau đây nhé.

1. Hướng dẫn cố định menu khi cuộn trang trong wordpress

Đã có rất nhiều wesite thực hiện cách này để tạo ra một giao diện thân thiện và giữ chân khách hàng. Hãy cùng tìm hiểu chi tiết các bước cố định menu khi cuộn trang trong wordpress nhé!

Bước 1: Cài đặt plugin Sticky Menu (or Anything!) on Scroll

+ Việc đầu tiên để thực hiện, bạn hãy đăng nhập vào trang Dashboard của WordPress. Tiếp theo đó, tại menu plugin, nhấn chọn “Add New”.

+ Ở thanh công cụ tìm kiếm, nhập tên plugin “Sticky Menu (or Anything!) on Scroll” và nhấn “OK”. Hệ thống sẽ trả về những kết quả có liên quan đến tên plugin bạn vừa tìm kiếm. 

Bước 2: Cấu hình plugin

+ Sau khi đã cài đặt và kích hoạt thành công plugin trên, việc quan trọng nhất bạn cần làm đó chính là Sticky Element.

+ Bằng cách di chuyển đến mục Settings và lựa chọn ô Sticky Menu (or Anything!).

Bước 3: Nhập vào CSS ID của menu

Bạn hãy sử dụng tính năng Inspect trong trình duyệt để tìm được ID.

+ Duyệt bất kỳ trang web nào và nhấp vào chuột phải, tiếp đó là Inspect từ menu ngữ cảnh.

+ Để tìm ra đoạn code HTML của menu, hãy tick vào mũi tên để bắt đầu.

+ Kéo chuột trở lại menu, lúc này màn hình sẽ hiển thị code HTML của menu cần cố định.

+ Bạn sao chép giá trị của thuộc tính có tên là id và dán vào phần cấu hình của plugin.

Lưu ý: Hãy nhớ thêm ký tự “#” trước tên của thuộc tính.

Chỉ với 3 bước đơn giản, phần tùy chọn Sticky Element đã xong và việc cố định menu khi cuộn trang trong wordpress đã được hoàn thành.

Xem thêm: Đăng Ký Mua Hosting Giá Rẻ #Số 1 Việt Nam

2. Sử dụng Code CSS để cố định menu khi cuộn trang trong wordpress

Bạn cũng có thể bổ sung thêm code CSS để thực hiện thiết lập cố định menu khi cuộn trang trong wordpress nếu không muốn sử dụng plugin.

#site-navigation {

background:#fff;

height:60px;

z-index:170;

margin:0 auto;

border-bottom:1px solid #dadada;

width:100%;

position:fixed;

top:0;

left:0;

right:0;

text-align: center;

}

+ Hãy thay đổi giá trị #site-navigation bằng CSS ID của bạn (CSS ID là giá trị bạn xác định ở bước trên)

+ Bạn nên bổ sung thêm không gian so với phần top của trang để tránh trường hợp menu cố định đè lên phần tiêu đề và header, bằng cách sao chép đoạn code sau:

.site-branding {

margin-top:60px;

}

Xem thêm: Css là gì? công dụng, chức năng và hướng dẫn sử dụng chi tiết

3. Lời kết

Với nội dung bài viết trên đây của Nhân Hòa, bạn có thể cài đặt thêm hiệu ứng cho website một cách dễ dàng. Hy vọng với hướng dẫn cố định menu khi cuộn trang trong WordPress trên sẽ giúp được bạn. Có gì thắc mắc hãy comment bên dưới để chúng ta cùng nhau giải quyết nhé. Chúc bạn thành công!

Hosting cho Wordpress thực sự là một lựa chọn tuyệt vời cho Website Wordpress của bạn. Bạn nên thuê hosting tại những địa chỉ uy tín như Nhân Hòa để nhận được tư vấn miễn phí và các ưu đãi về giá đối với khách hàng mới và khách hàng lâu năm. Bảng giá chi tiết dịch vụ đã được Nhân Hòa cập nhật. Chúc bạn sớm tìm được giải pháp mạng phù hợp với nhu cầu phát triển của doanh nghiệp. Trân trọng!

+ Tổng đài: 1900 6680

+ Website: https://nhanhoa.com/

+ Fanpage: https://www.facebook.com/nhanhoacom

+ Chỉ đường: https://g.page/nhanhoacom

Chương trình khuyến mãi mới nhất: https://nhanhoa.com/khuyen-mai.html

Bài viết liên quan
20/11/2024
Các fan cứng của Nhân Hòa đã biết Chương trình Black Friday 2024 sẽ có mức ưu đãi khủng là bao nhiêu % và áp dụng cho những...
19/11/2024
Đừng để website của bạn bị "tắt đèn" vì hết hạn tên miền! Hãy chủ động gia hạn tên miền để đảm bảo sự liên...
16/11/2024
Không phải bàn cãi việc WordPress đang là một trong những nền tảng hàng đầu trong việc xây dựng website hiện nay. Và giải...
Chuyên nghiệp và tận tình
Hỗ Trợ Trực Tuyến 24/7
Đội ngũ chuyên gia giúp xử lý vấn đề kỹ thuật để website của bạn luôn hoạt động tốt và chạy nhanh. Bất kỳ lúc nào.
Kết nối với Nhân Hoà

Map Tầng 4 - Toà nhà 97 - 99 Láng Hạ, Quận Đống Đa, Thành Phố Hà Nội

Phone Điện thoại: 1900 6680 - (024) 7308 6680

Mail Mail: sales@nhanhoa.com

Hotline Phản ánh chất lượng dịch vụ: 091 140 8966

Map 927/1 CMT8, Phường 7, Quận Tân Bình, Thành phố Hồ Chí Minh

Phone Điện thoại: 1900 6680 - (028) 7308 6680

Mail Mail: hcmsales@nhanhoa.com

Hotline Phản ánh chất lượng dịch vụ: 091 140 8966

Map Tầng 2 Tòa nhà Sài Gòn Sky, ngõ 26 Nguyễn Thái Học, phường Đội Cung, TP. Vinh, Nghệ An

Phone Điện thoại: 1900 6680 - (024) 7308 6680 - nhánh 6

Mail Mail: contact@nhanhoa.com

Hotline Phản ánh chất lượng dịch vụ: 091 140 8966

Kết nối với Nhân Hoà
Gọi lại cho tôi
Gọi miễn phí
Gọi miễn phí
×
Thông báo

Đăng nhập thành công!