Hướng dẫn cố định menu khi cuộn trang trong wordpress

Tạo menu sẽ cố định khi khách truy cập cuộn xuống phía dưới màn hình giúp cho khách dễ dàng di chuyển không  mất thời gian để cuộn lên đầu trang để nhìn thấy menu.
Bài viết này mình xin hướng dẫn các bạn sử dụng 2 cách:
Cách 1: Sử dụng plugin để tạo.
Đầu tiên ta tiến hành cài đặt plugin Sticky Menu (or Anything!) on Scroll hoặc bạn có thể tải tại đây

Download Sticky Menu

Khi cài đặt xong plugin ta kích hoạt và tiến hành cấu hình plugin

Ta chỉ quan tâm đến Sticky Element: ở đây là CSS ID hoặc Class của menu ta cần cố định.
Để xác định được ID(Class) cần cố định ta click chuột phải chỗ cần cố định rồi chọn kiểm tra(Inspect) trên trình duyệt để xác định ID(Class) cần cố định, ID cố định của mình là masthead lứu ý nhớ thêm # vào trước nhé: #masthead.
Như vậy là phần cố định menu bằng plugin đã xong.
Cách 2: Sử dụng Javascript và css để cố định không cần plugin.
Cũng như cách 1 ta cần xác định ID hoặc Class của menu cần cố định sau đó thêm đoạn Javascript vào bất kỳ đâu trong thẻ body

<script type="text/javascript">
jQuery(document).ready(function($) {
var $filter = $('.site-header');
var $filterSpacer = $('<div />', {
"height": $filter.outerHeight()
});
if ($filter.size())
{
$(window).scroll(function ()
{
if (!$filter.hasClass('fix') && $(window).scrollTop() > $filter.offset().top)
{
$filter.before($filterSpacer);
$filter.addClass("fix");
}
else if ($filter.hasClass('fix') && $(window).scrollTop() < $filterSpacer.offset().top)
{
$filter.removeClass("fix");
$filterSpacer.remove();
}
});
}});
</script>

Chú ý đoạn này : var $filter = $(‘.site-header’); Các bạn thay bằng ID(Class) của bạn cho phù hợp nhé.
Tiếp theo bạn cần thêm CSS cho ID(Class) Fix để giúp Menu luôn ở vị trí đầu của trang:

.site-header.fix {
left: 0;
max-width: 100%;
overflow: visible;
position: fixed !important;
top: 0;
width: 100%;
z-index: 1000;
}

Bây giờ lưu lại và quay trở lại trang website của mình để tận hưởng kết quả thôi.
Chúc các bạn thành công.