How can i display an image just for a certain media query?-CodePudding

i am trying to do my website responsive and when i get to a certain media query width my navigation menu is inside a hamburguer menu where i have all the <a> tags for the different sections. Now i want to display the logo just for this media query and not for the desktop version.

This is my navigation menu

<div >
            <div >
                <img src="images/LOGO.png" alt="">
            </div>
            <a href="#main">Home</a>
            <a href="#about">About</a>
            <a href="#skills">Roadmap</a>
            <a href="#gallery">Gallery</a>
            <a href="#work">Team</a>
            <a href="#contact">Contact</a>
            
        </div>

So i want to hide the div with class "logo" unless the width has a max of 375px:

@media (max-width:375px) {
    .animated-text h3{
        font-size:0.5em;
    }

    .brand{
        display: none;
    }

    .menu-btn{
        margin-right: 4px;
    }

    .about .content .col-right {
        
        width: 100%;
    }

    .about .content .col-left{
        position:relative;
        width: 100%;
    }

    .about .content .col-right .paragraph-text {
        font-size: 0.8em;
    }

    .skills .content .col-left p{
        font-size: 0.8em;
    }  

    .skills .content .col-right .bar .info {
        font-size: 11px;
        
    }

    .skills .content .content-title{
        position: relative;
        width: 100%;
    }

    .contact .content .row .card{
        margin-bottom: 15px;

    }

    .contact .content .row .card .contact-icon {
        font-size: 2em;
    }

    .about .content .col-left .img-card img {
        object-fit: contain;
    }

    .about .content .col-right {
        margin-top: -160px;
    }

    .about .content .col-left .img-card img {
        top:-50px;
    }
        
}

This is my script.js:

//Javascript Responsive nav
const menuBtn = document.querySelector(".menu-btn");
const navigation = document.querySelector(".navigation");
const navigationItems = document.querySelectorAll(".navigation a");

menuBtn.addEventListener('click', () =>{
    menuBtn.classList.toggle('active');
    navigation.classList.toggle('active');
});

navigationItems.forEach((navigationItem) => {
    navigationItem.addEventListener("click", () => {
        menuBtn.classList.remove("active");
        navigation.classList.remove("active");
    });
});

CodePudding user response：

Here an example to display your logo for a specific size (your logo is displayed if width<375px )

You can set a default style with display: none for your img

Then, you can use the following CSS in media query display: block

.logo {
     display: none;
}
@media (max-width:375px) {
        .animated-text h3{
            font-size:0.5em;
        }

        .logo {
            display: block;
        }
    
        .brand{
            display: none;
        }
    
        .menu-btn{
            margin-right: 4px;
        }
    
        .about .content .col-right {
            
            width: 100%;
        }
    
        .about .content .col-left{
            position:relative;
            width: 100%;
        }
    
        .about .content .col-right .paragraph-text {
            font-size: 0.8em;
        }
    
        .skills .content .col-left p{
            font-size: 0.8em;
        }  
    
        .skills .content .col-right .bar .info {
            font-size: 11px;
            
        }
    
        .skills .content .content-title{
            position: relative;
            width: 100%;
        }
    
        .contact .content .row .card{
            margin-bottom: 15px;
    
        }
    
        .contact .content .row .card .contact-icon {
            font-size: 2em;
        }
    
        .about .content .col-left .img-card img {
            object-fit: contain;
        }
    
        .about .content .col-right {
            margin-top: -160px;
        }
    
        .about .content .col-left .img-card img {
            top:-50px;
        }
            
    }

 <div >
                <div >
                    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="">
                </div>
                <a href="#main">Home</a>
                <a href="#about">About</a>
                <a href="#skills">Roadmap</a>
                <a href="#gallery">Gallery</a>
                <a href="#work">Team</a>
                <a href="#contact">Contact</a>
                
            </div>