Chắc bạn đã nhìn thấy hình thức menu này ở vô số website hiện nay đúng không nào?

Menu sẽ cố định khi khách ghé thăm site cuộn xuống phía dưới màn hình. Hình thức này giúp cho khách dễ dàng di chuyển website của bạn. Họ không còn mất thời gian để cuộn lên đầu trang để nhìn thấy menu và di chuyển sang phần khác của site.

Đang xem: Cố định menu khi cuộn trang

Bạn đang xem: Cố định menu khi cuộn trang

Bạn cũng muốn cố định menu trên website của bạn?

Bạn sẽ học được kỹ thuật này trong bài viết hôm nay

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

Bây giờ bạn cần cài đặt và kích hoạt plugin Sticky Menu (or Anything!) on Scroll. Tên plugin dài loằng ngoằng nhưng nó làm việc rất tốt. Mình không gặp lỗi gì khi cố định menu.

Ngay khi plugin được kích hoạt, bạn sẽ đi tới Settings -> Sticky Menu (or Anything!) để cấu hình plugin.

*

Click vào mũi tên để bắt đầu tìm ra cái đoạn code HTML của menutrên trang web:

*

Như vậy phần tùy chọn Sticky Element chúng ta đã giải quyết xong. Đến đây là menu của bạn đã được cố định khi cuộn xuống rồi đấy.

Ngoài ra bạn để ý thấy có một vài tùy chọn khác của plugin. Các tùy chọn này đều được giải thích rõ ràng do vậy bạn sẽ không gặp nhiều khó khăn để hiểu chúng.

Nếu bạn không thích dùng plugin có thể bổ sung đoạn code CSS sau:

#site-navigation {background:#fff;height:60px;z-index:170;margin:0 auto;border-bottom:1px solid #dadada;width:100%;position:fixed;top:0;left:0;right:0;text-align: center;}

Thay giá trị #site-navigation bằng CSS ID của bạn. CSS ID là giá trị bạn xác định ở bước trên.

Nếu menu cố định có hiện tượng đè lên phần tiêu đề và header thì bổ sung thêm không gian so với phần top của trang bằng bằng đoạn code sau:

.site-branding {margin-top:60px;}

Với bài viết này, bạn đã biết cách cố định menu khi cuộn trang.

Nếu bạn có vấn đề với việc cố định menu, hãy để lại câu hỏi ở bên dưới.

Đừng quên click like fanpage để ủng hộ blog.

Danh mục Thủ Thuật WordPress Điều hướng bài viếtCách thêm nút mua ngay trong website WordPress bán hàngĐánh giá plugin WP Mega Menu: cách tạo mega menu đẹp mắt

*

Label Tên* Email* WebSite URL Label Tên* Email* WebSite URL 20 Comments newest oldest Inline FeedbacksView all comments Oc1ober Tháng Ba 5, 2021 8:30 chiều

Muốn áp dụng cả cho mobile thì sửa hay tạo Code như thế nào bạn?

Reply Hoa Tháng Một 8, 2021 11:09 sáng Anh ơi xem giúp em trang: https://xenangtaygiare.vn/ nhé!

Reply Dung Tháng Một 4, 2020 6:54 chiều Cho mình hỏi chút, mình dùng Flasome, mình muốn cố định chỉ thanh submenu thôi, thử bao nhiêu cách cũng chưa biết làm, nhờ anh giúp đỡ. Web http://thietbipanasonic.vn

Reply Author Nguyễn Văn Thịnh Tháng Một 5, 2020 7:28 sáng Reply to Dung ý bạn là cái phần menu bên trong danh mục sản phẩm phải không. Cố định cái này mình ít thấy vì nó chiếm không gian theo chiều dọc nên chắc theme không hỗ trợ. Mình không dùng theme này nhiều nên không rõ bạn có thử hỏi tác giả theme nếu mua bản quyền hoặc vào các group wordpress hỏi xem vì ở đó có dân code.

Xem thêm:

Reply Bien hieu van phong Tháng Chín 11, 2019 11:40 chiều mình đã làm và thanh công cảm ơn admin

Reply thietbinanghungviet Tháng Năm 25, 2019 10:56 sáng Em đã cài mà không được. Ad xem giúp Em nhé. Tks adhttps://thietbinanghungviet.com/

Reply thietbinanghungviet Tháng Năm 25, 2019 10:56 sáng Reply to thietbinanghungviet Em cài plugin nhé

Reply phannhon Tháng Ba 4, 2019 7:37 chiều sao mình cài xong nó cũng di chuyển nhưng nó đang nằm ngang nó nhảy xuống dọc xác lề trái

Reply Author Nguyễn Văn Thịnh Tháng Ba 4, 2019 7:53 chiều Reply to phannhon mình thấy mấy cái này còn phụ thuộc vào theme vì động chạm đến code nên theme này thì ăn có khi theme khác vẫn lỗi. Hay nhất vẫn là có theme hỗ trợ sẵn tính năng này thì tốt.

Reply hoàng sơn Tháng Năm 29, 2018 5:26 chiều web mình chỉ có class thôi ko có id thì làm ntn

Reply Hồi nguyễn Tháng Ba 20, 2018 9:13 chiều bạn tìm giúp mình cái css id trang web kinhphunano.com với. Mình ko tìm dc. thanks bạn

Reply Author Nguyễn Văn Thịnh Tháng Ba 21, 2018 8:07 sáng Reply to Hồi nguyễn theme của bạn chỉ có css class nên bạn thay đổi code css class với trường hợp của bạn bạn có thể thử .sitenav

Reply khanh30125 Tháng Hai 25, 2018 3:04 chiều e làm trên theme metro magazine, trên menu em có chèn icon vào nhưng e lm theo thì cái menu nó trong suốt

Reply Author Nguyễn Văn Thịnh Tháng Hai 25, 2018 3:09 chiều Reply to khanh30125 nói chung cái này chủ yếu là do css bạn nghiên cứu thêm css cho phù hợp với theme của mình xem sao.

Reply Hiếu Tháng Hai 9, 2018 12:37 chiều Cảm ơn bạn, đang cần gấp

Reply Tho Nguyen Tháng Mười Hai 26, 2017 12:31 chiều Bài viết rất dễ hiểu. Thanks bạn.

Reply Author Nguyễn Văn Thịnh Tháng Mười Hai 26, 2017 1:39 chiều Reply to Tho Nguyen Thanks bạn ghé thăm blog của mình

Reply kua Tháng Chín 9, 2017 8:27 chiều cám ơn sếp mình làm được rồi !!!

Reply Author Nguyễn Văn Thịnh Tháng Chín 9, 2017 8:40 chiều Reply to kua chúc mừng bạn

Reply

Bình luận gần đây

VPS giá rẻ

Dành cho người mới

1. WordPress/SharedHost

Học WordPress căn bản

Học tạo website với bán hàng với Woocomerce

Sử dụng cPanel

Cách lập website cho newbie

Sử dụng FTP cho newbie

2. VPS

Học cách sử dụng VPS

Cách cài đặt máy chủ A2Hosting

Cách cài đặt máy chủ Digital Ocean

Cách cài đặt máy chủ Linode

Cách cài đặt máy chủ Vultr

Đừng quên những ưu đãi này

Elegant Theme: giảm 20% cho gói thành viên một năm

A2Hosting: shared host giảm 51%. Xem đánh giá.

HawkHost: mã giảm tới 40%. Xem ở đây.

Linode VPS: Tặng 20$ cho khách hàng mới. Xem ở đây.

DigitalOcean VPS: Tặng 10$ cho khách hàng mới. Xem ở đây.

Xem thêm:

Vultr VPS: Tặng 103$ cho khách hàng mới. Xem ở đây.

Tham khảo

SharedHost nước ngoài nên dùng

VPS nước ngoài giá rẻ chất lượng

Địa chỉ mua Theme WordPress tốt nhất

Công cụ nghiên cứ từ khóa tốt nhất

Địa chỉ mua tên miền tốt nhất

Host nước ngoài

Leave a Reply

Your email address will not be published. Required fields are marked *