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

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

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

Cố định menu khi cuộn trang trong WordPress. Bạn muốn người dùng khi vào trang web sẽ thấy thanh menu cố định để lôi kéo họ ở lại trang lâu hơn? Đã có rất nhiều website sử dụng cách này. Cùng iSchoolvietnam tìm hiểu cách làm nhé:

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

Hướng dẫn 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.

Hướng dẫn cố định menu khi cuộn trang trong WordPress hình 1

Cấu hình plugin

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.

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:

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.

Hướng dẫn cố định menu khi cuộn trang trong WordPress hình 2

Lấy giá trị của nó và nhập vào phần cấu hình của plugin

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.

Bạn muốn cài đặt hiệu ứng này cho website của bạn? Mong rằng 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!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *