Để khi người dùng kéo đến cuối trang mà menu vẫn được hiển thị cố định thì cách tạo menu trong WordPress được nhiều người lựa chọn sử dụng. Việc này giúp người dùng có thể dễ dàng di chuyển website và không cần mất thời gian kéo chuột đến đầu trang tìm kiếm menu để chuyển sang trang khác. Bài viết dưới đây, Vietnix sẽ hướng dẫn đến bạn đọc 2 cách cố định menu khi cuộn trang trong WordPress nhé.
1. Dùng plugin để cố định menu khi cuộn trang trong WordPress
Đối với cách tạo menu cố định khi scroll chuột trong WordPress thì đây được xem là phương pháp dễ dàng thực hiện nhất và phù hợp đối với những người mới bắt đầu sử dụng WordPress.
Bước 1: Cài đặt và kích hoạt plugin Sticky Menu & Sticky Header. Tại menu Plugins > Chọn Add New > Tìm kiếm Sticky Menu & Sticky Header > Nhấn OK > Install Now > Active.
Bước 2: Sau khi kích hoạt plugin > truy cập mục Settings > Chọn Sticky Menu (or Anything) để tiến hành cấu hình cài đặt cho plugin.
Bước 3: Nhập CSS ID của menu mà bạn muốn cố định tại ô Sticky Element. Để tìm được ID Menu Truy cập vào website > Chuyển đến phần menu > Nhấp chuột phải > Chọn Inspect.
Sau khi màn hình chia làm đôi và mã code của website sẽ được hiển thị ở phía bên phải. Để tìm ra đoạn code HTML của thanh menu > Bấm tick vào mũi tên để bắt đầu tìm kiếm. Đoạn mã code liên quan đến menu sẽ có dạng:
<nav id=”site-navigation” class=”primary-navigation” aria-label="Primary menu">
Bạn cần copy cụm trong dấu ngoặc của ID. Ví dụ: theo mã code trên là site-navigation.
Để thực hiện tìm kiếm dòng code tương tự, bạn cuộn chuột trong ngăn Elements.
Nhấn đúp chuột vào dòng code > Bấm chuột phải để sao chép code > Tại phần Sticky Menu dán ID CSS. (Lưu ý: cần thêm ký tự # trước tên của thuộc tính).
Bước 4: Cuối cùng, nhấp vào nút Save Changes ở cuối trang để hoàn tất quá trình. Sau đó, khi truy cập lại, thanh menu sẽ được cố định trang trong WordPress.
2. Cố định menu khi cuộn trang thủ công bằng CSS
Nếu không muốn sử dụng plugin bạn có thể cố định menu khi cuộn trang thủ công bằng cách bổ sung thêm code CSS. Đối với cách này sẽ yêu cầu người dùng cần tùy chỉnh mã CSS trong theme.
Để thực hiện bạn chỉ cần làm theo những hướng dẫn cụ thể dưới đây:
Bước 1: Truy cập vào Appearance > Chọn Customize để vào trình chỉnh sửa theme của WordPress.
Bước 2: Nhấn vào mục Additional CSS ở phía cuối cột bên trái > Thêm vào dòng code sau:
#site-navigation { position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 999; background: #00000; }Sau đó, cách thức cố định menu khi cuộn trang trên trang web sẽ được hiển thị ở màn hình bên cạnh.
Để tránh trường hợp menu cố định đè lên phần tiêu đề và header bạn nên bổ sung thêm không gian so với phần top của tranh bằng cách thêm vào đoạn code sau:
.site-branding { margin-top:60px; }Mã code trên được cài đặt mặc định sẽ hiển thị để background của thanh menu xuất hiện xuyên suốt. Trường hợp bạn không thích màu của background hiện tai, bạn có thể đổi màu của background bằng cách tìm code mã màu khác và thay thế ở dòng sau:
background: #38A7FF
Bước 3: Để hoàn tất việc tạo thanh menu cố định bạn chỉ cần nhấn vào nút Publish ở phía trên đầu màn hình.
Bên cạnh plugin Sticky Menu & Sticky Header dùng để tạo menu cố định khi scroll chuột thì bạn cũng sẽ phải phối hợp thêm một số plugin khác để tối ưu hiệu suất hoạt động cho website WordPress cũng như cải thiện trải nghiệm người dùng.
Lời kết
Ở bài viết trên, Vietnix đã hướng dẫn 2 cố định menu khi cuộn trang trong WordPress đơn giản và nhanh chóng. Mong rằng bạn đọc sẽ có được những thông tin hữu ích và áp dụng thành công những phương pháp trên. Đừng ngại để lại bình luận bên dưới về mọi thắc mắc hay khó khăn trong quá trình thực hiện của bạn, Vietnix sẽ phản hồi trong thời gian sớm nhất.
