Sử dụng logo riêng biệt cho desktop và mobile trên Flatsome

Cập nhật lần cuối 28/02/2026 bởi Hà Văn Thuật trong Thủ thuật Code vào 30/03/2025

Công việc rất đơn giản chỉ copy đoạn code dưới đây cho vào phần tùy biến css trong Theme Flatsome là có logo riêng biệt giữa desktop và mobile rồi. Bạn nhớ thay link hình ảnh bằng link logo của bạn nhé.

Logo trên Desktop
Logo trên Desktop
Logo trên Mobile
Logo trên Mobile
@media (max-width: 549px)
#logo img {
    max-height: 45px;
    opacity: 0;
    margin-right: 10px;
}
.logo a {
    background-image: url(https://themewp.vn/wp-content/uploads/2021/04/themewp_logo.png); //đường dẫn logo của bạn
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    margin-right: 10px;
}
.logo a {
    text-decoration: none;
    display: block;
    color: #446084;
    font-size: 32px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0;
}

Chúc các bạn thành công! Nếu cần thiết kế Website thì liên hệ với mình qua Zalo: 0962.682.434 nhé.

Bài viết liên quan khác:

Thêm logo cho menu mobile theme Flatsome

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *