2 cách tạo menu cố định khi scroll chuột trong WordPress

Lượt xem
Home

Để 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.

Plugin cố định menu khi cuộn trang WordPress
Plugin hỗ trợ cố định menu khi cuộn trang trong WordPress

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. 

Plugin cố định menu khi cuộn trang WordPress
2 cách tạo menu cố định khi scroll chuột trong WordPress 26

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.

Tìm id menu wordpress
Tìm id menu wordpress

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">
Tìm id menu wordpress
2 cách tạo menu cố định khi scroll chuột trong WordPress 27

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

Tìm id menu wordpress
2 cách tạo menu cố định khi scroll chuột trong WordPress 28

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.

Cố định menu khi cuộn trang thủ công bằng CSS
2 cách tạo menu cố định khi scroll chuột trong WordPress 29

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.

Cố định menu khi cuộn trang thủ công bằng CSS
2 cách tạo menu cố định khi scroll chuột trong WordPress 30

Để 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
Cố định menu khi cuộn trang thủ công bằng CSS
2 cách tạo menu cố định khi scroll chuột trong WordPress 31

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.

Cố định menu khi cuộn trang thủ công bằng CSS
2 cách tạo menu cố định khi scroll chuột trong WordPress 32

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.

Trên thực tế nhiều theme bản quyền hiện nay đã có sẵn tính năng cố định menu trong phần theme option. Thay vì phải bỏ thêm nhiều chi phí để sở hữu chúng thì giờ đây bạn có thể nhận miễn phí khi đăng ký sử dụng dịch vụ hosting/VPS tại Vietnix. Đây là chính sách được triển khai nhằm hỗ trợ tối đa cho quá trình thiết kế, xây dựng và vận hành website để người dùng có thể kinh doanh hiệu quả trên internet.

Danh sách theme và plugin tính được tặng miễn phí đến thời điểm hiện tại bao gồm:

  • Plugin: Rank Math SEO Pro – hỗ trợ kiểm soát các yếu tố và tùy chỉnh theo chuẩn SEO.
  • Plugin: WPML – hỗ trợ xây dựng web đa ngôn ngữ.
  • Plugin: WP Smush Pro – tối ưu hóa hình ảnh dễ dàng và nhanh chóng.
  • Toàn bộ theme + plugin của MyThemeShop.
  • Theme Divi.
  • Plugin Bricks.

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.

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

5/5 - (167 bình chọn)

Hoàng Vui

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Bình luận

Theo dõi
Thông báo của
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận