Hướng dẫn tạo Sticky Header cho Astra

Sticky Header là gì?

Sticky header là phần header luôn treo cố định ở trên cùng khi người đọc kéo xuống đọc nội dung bài viết của bạn. Sticky header giúp điều hướng người đọc tốt hơn bởi vì menu luôn hiện trước mắt trình duyệt. Sticky Header giúp gia tăng tỷ lệ chuyển đổi cho toàn bộ website của bạn. Bên cạnh đó, sticky header còn giúp gia tăng nhận diện thương hiệu bởi vì tăng thời gian hiển thị Logo trước người đọc.

Khuyết điểm của Sticky Header là làm phân tâm người đọc, vì vậy tôi chỉ áp dụng Sticky header trên màn hình lớn như màn hình máy tính và tinh giản tối đa để người đọc có thể thoải mái khi đọc bài.

Tạo sticky header cho Astra như thế nào?

Astra Pro cho phép bạn tạo Sticky Header cho blog trên cả thiết bị di động và cả máy tính.

Trước hết bạn cần phải bật module Sticky Header trong Astra Pro Setting.

Astra Pro Sticky Header
Kích hoạt Sticky Header – Astra Pro

Sau khi kích hoạt bạn có thể tuỳ chỉnh Sticky Header trong phần Customize của theme.

Sticky Header Astra
Tuỳ chỉnh trong Customize

Astra cho phép bạn tuỳ chỉnh khá nhiều lựa chọn:

  • Sticky cả above header hoặc below header, bên cạnh Primary header
  • Lựa chọn logo khác cho Sticky Header. Bạn nên lựa chọ longo nhỏ hơn, tối giản hay tinh gọn hơn để không phân tâm người đọc.
  • Tuỳ chỉnh hiệu ứng chuyển động. Giúp Sticky header mượt mà thoải mái hơn.
  • Tuỳ chỉnh ẩn khi người đọc kéo trang. Khuyến nghị bạn nên stick vào để giảm sự phân tán.

Để tuỳ chỉnh màu sắc của Sticky header bạn vào Customizing > Colors & Background >Primary Header

Ngoài ra, bạn có thể dùng CSS để tuỳ chỉnh thêm cho Sticky như bỏ đổ bóng cho sticky header và các tuỳ chỉnh khác nếu muốn.

.main-header-bar.ast-sticky-active {
    box-shadow: unset;
}