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.
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.
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.
Yêu thích viết blog.