Cách cố định menu khi cuộn trang trong WordPress

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

Chắc bạn đã nhìn thấy hình thức menu này ở vô số website hiện nay đúng không nào?

Menu sẽ cố định khi khách ghé thăm site cuộn xuống phía dưới màn hình. Hình thức này giúp cho khách dễ dàng di chuyển website của bạn. Họ không còn mất thời gian để cuộn lên đầu trang để nhìn thấy menu và di chuyển sang phần khác của site. 

Bạn cũng muốn cố định menu trên website của bạn?

Bạn sẽ học được kỹ thuật này trong bài viết hôm nay

Cách cố định menu khi cuộn trang trong WordPress?

Bây giờ bạn cần cài đặt và kích hoạt plugin Sticky Menu (or Anything!) on Scroll. Tên plugin dài loằng ngoằng nhưng nó làm việc rất tốt. Mình không gặp lỗi gì khi cố định menu. 

Ngay khi plugin được kích hoạt, bạn sẽ đi tới Settings -> Sticky Menu (or Anything!) để cấu hình plugin.

cách cố định menu khi cuộn trang trong wordpress 1

Tùy chọn quan trọng nhất bạn cần cấu hình là Sticky Element. Ở đây bạn cần nhập vào CSS ID của menu bạn cần cố định như ảnh chụp của mình.

Vậy CSS ID lấy ở đâu ra?​

Để tìm được ID này bạn sử dụng tính năng Inspect trong trình duyệt của bạn.

Đây là cách làm:

Duyệt bất kỳ trang web nào và click chuột phải. Chọn tùy chọn Inspect từ menu ngữ cảnh. 

cách cố định menu khi cuộn trang trong wordpress 2

Click vào mũi tên để bắt đầu tìm ra cái đoạn code HTML của menu trên trang web:

cách cố định menu khi cuộn trang trong wordpress 3

Rê chuột lên menu. Bây giờ bạn sẽ nhìn thấy code HTML của menu cần cố định. Bạn để ý tới thuộc tính có tên là Id. Bạn lấy giá trị của nó và nhập vào phần cấu hình của plugin. Chú ý bạn phải có ký tự # trước tên của thuộc tính.

cách cố định menu khi cuộn trang trong wordpress 4

Như vậy phần tùy chọn Sticky Element chúng ta đã giải quyết xong. Đến đây là menu của bạn đã được cố định khi cuộn xuống rồi đấy.

Ngoài ra bạn để ý thấy có một vài tùy chọn khác của plugin. Các tùy chọn này đều được giải thích rõ ràng do vậy bạn sẽ không gặp nhiều khó khăn để hiểu chúng.

Nếu bạn không thích dùng plugin có thể bổ sung đoạn code CSS sau:

#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; }

Thay 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.

Nếu menu cố định có hiện tượng đè lên phần tiêu đề và header thì bổ sung thêm không gian so với phần top của trang bằng bằng đoạn code sau:

.site-branding { margin-top:60px; }

Với bài viết này, bạn đã biết cách cố định menu khi cuộn trang.

Nếu bạn có vấn đề với việc cố định menu, hãy để lại câu hỏi ở bên dưới.

Đừng quên click like fanpage để ủng hộ blog. 

guest
17 Comments
newest
oldest
Inline Feedbacks
View all comments
Dung
Tháng Một 4, 2020 6:54 chiều

Cho mình hỏi chút, mình dùng Flasome, mình muốn cố định chỉ thanh submenu thôi, thử bao nhiêu cách cũng chưa biết làm, nhờ anh giúp đỡ. Web http://thietbipanasonic.vn

Bien hieu van phong
Tháng Chín 11, 2019 11:40 chiều

mình đã làm và thanh công cảm ơn admin

thietbinanghungviet
Tháng Năm 25, 2019 10:56 sáng

Em đã cài mà không được. Ad xem giúp Em nhé. Tks ad
https://thietbinanghungviet.com/

thietbinanghungviet
Tháng Năm 25, 2019 10:56 sáng

Em cài plugin nhé

phannhon
phannhon
Tháng Ba 4, 2019 7:37 chiều

sao mình cài xong nó cũng di chuyển nhưng nó đang nằm ngang nó nhảy xuống dọc xác lề trái

hoàng sơn
Tháng Năm 29, 2018 5:26 chiều

web mình chỉ có class thôi ko có id thì làm ntn

Hồi nguyễn
Tháng Ba 20, 2018 9:13 chiều

bạn tìm giúp mình cái css id trang web kinhphunano.com với. Mình ko tìm dc. thanks bạn

khanh30125
khanh30125
Tháng Hai 25, 2018 3:04 chiều

e làm trên theme metro magazine, trên menu em có chèn icon vào nhưng e lm theo thì cái menu nó trong suốt

Hiếu
Tháng Hai 9, 2018 12:37 chiều

Cảm ơn bạn, đang cần gấp

Tho Nguyen
Tho Nguyen
Tháng Mười Hai 26, 2017 12:31 chiều

Bài viết rất dễ hiểu. Thanks bạn.

kua
kua
Tháng Chín 9, 2017 8:27 chiều

cám ơn sếp mình làm được rồi !!!

17
0
Would love your thoughts, please comment.x
()
x