Làm logo full width trong theme Flatsome

Logo full width trong giống mấy trang báo chí hoặc trang trường học trên theme Flatsome thì làm như thế nào? Hãy xem hết bài hướng dẫn bên dưới để có thể làm được nhé!

Logo full width trong theme flatsome ( Banner full width )

Cách làm Logo full width

Để làm được như hình thì sẽ có nhiều cách, 1 trong những cách đơn giản nhất là úp cái banner đó  thay thế cái banner trang hiện tại , sau đó css nó full là ok

Bước 1: Vào head và thay thế cái logo như hình bên dưới ( chuẩn bị 1 banner với chiều dài và bề rộng hợp lý để thay vào nhé )

Bước 2: Chèn css bên dưới bỏ vào là được nhé

.header-main {
height: auto;
object-fit: cover;
}
.header-main .logo {
margin-right: unset;
width: 100% !important;
}
.header-main .logo img {
max-height: fit-content !important;
height: auto;
object-fit: cover;
}

Giải thích về đoạn css trên để bạn có thể hiểu hơn

height: auto; <= Thường flatsome set cố định chiều rộng nên đoạn này đặt auto để head có thể rộng theo chiều rộng của hình ảnh

margin-right: unset; < = mặc định là cái logo bị margin bên phải nên dùng Unset để bỏ qua margin-right này

width: 100% !important; <= mặc đinh cái logo ko chiếm được 100% chiều dài của Khung nên dùng css này để ép Logo có thể full 100% khung

OK sau khi thêm css trên và lưu lại thì chúng ta có kết quả như trên