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

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

Trong bài viết này, Khánh sẽ hướng dẫn 2 cách đơn giản giúp cố định menu khi cuộn trang trong WordPress.

Kiểu menu này (còn gọi là sticky menu) vẫn hiển thị trên màn hình dù bạn có lướt xuống cuối trang.

Nó giúp trải nghiệm người dùng tốt hơn vì họ có thể thuận tiện bấm vào menu tìm mục mình muốn trong khi đang lướt mà không cần phải mất công kéo lại lên trên đầu trang.

Nó cũng đã được chứng minh là làm tăng tỷ lệ chuyển đổi ở các website bán hàng.

2 cách giúp cố định menu khi cuộn trang trong WordPress

Cách 1: Sử dụng plugin

Đây là phương pháp dễ dàng nhất, đặc biệt cho người mới bắt đầu.

Bạn cài đặt và kích hoạt plugin Sticky Menu & Sticky Header bằng cách vào Plugins >> Add New, sau đó search Sticky Menu & Sticky Header trên thanh tìm kiếm.

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

Sau khi kích hoạt xong, bạn vào Settings >> Sticky Menu (or Anything) để định cấu hình cài đặt plugin.

tạo menu cố định khi scroll chuột trong wordpress

Trước tiên, bạn cần nhập CSS ID của menu bạn muốn cố định vào ô Sticky Element.

tạo menu cố định khi cuộn trang

Bạn truy cập vào trang web, di chuột đến menu, nhấp chuột phải và chọn Inspect.

nhấp chuột phải chọn inspect

Màn hình sẽ chia làm đôi, với nửa bên phải là các mã code của website.

cột chứa mã code của trang

Bạn cần tìm mã code liên quan đến menu, nó sẽ giống thế này:

<nav id=”site-navigation” class=”main-navigation” role=”navigation”>

Và bạn sẽ copy cụm trong dấu ngoặc của id, theo ví dụ trên là site-navigation.

Bạn cuộn chuột trong ngăn Elements để tìm kiếm dòng code tương tự. Của Khánh sẽ là: site-navigation.

tìm mã code menu

Bạn nhấp đúp chuột vào dòng code, rồi bấm chuột phải để sao chép, sau đó dán ID CSS trong phần cài đặt Sticky Menu và đừng quên thêm dấu # vào trước id.

thêm mã id css vào sticky menu

Cuối cùng bạn đừng quên nhấp “Save Changes” ở cuối trang.

nhấp nút save changes ở cuối trang

Bạn truy cập vào website thì sẽ thấy menu đã được cố định khi cuộn trang trong WordPress.

Cách 2: Cố định menu bằng cách thủ công

Cách này yêu cầu bạn tùy chỉnh mã CSS trong theme.

Đầu tiên bạn vào Appearance >> Customize để vào trình chỉnh sửa theme của WordPress.

vào trình chỉnh sửa theme wordpress

Tiếp theo, bạn nhấp vào Additional CSS ở cột bên trái và thêm dòng code này:

#site-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
z-index: 999;
background: #00000; 
}

Bạn nhìn sang màn hình bên cạnh thì sẽ thấy menu được cố định như thế nào trên trang web.

menu được cố định trong wordpress

Mã code trên được cài đặt mặc định để background của thanh menu xuyên suốt.

Nếu bạn muốn đổi màu của background thì có thể chọn 1 mã màu rồi thay thế ở dòng:

background: #00000

Ví dụ Khánh muốn màu nền là vàng, Khánh search trên Google là “yellow code” thì sẽ hiện ra một mã bắt đầu bằng dấu #: #FFFF00.

cách search mã màu

Khánh copy và thay thế vào đoạn mã trên:

background: #FFFF00
copy mã màu vào css

Kết quả:

màu nền menu được thay đổi

Cuối cùng bạn đừng quên nhấp nút Publish ở đầu màn hình.

nhấp nút publish

Lời kết

Vậy là bạn đã biết 2 cách cố định menu khi cuộn trang trong WordPress vô cùng đơn giản.

Nếu bạn còn bất cứ câu hỏi nào thì đừng ngại để lại bình luận bên dưới.

Khánh sẽ giải đáp giúp bạn.

Hẹn gặp bạn ở bài hướng dẫn tiếp theo.

Leave a Comment

Email của bạn sẽ không được hiển thị công khai.