Can I use two different logo files for my dynamic navbar based on the screen size? [closed]

Question

I am developing a responsive web page, using HTML and CSS. The primary logo I have is too wide for a mobile screen. So I want to use a secondary logo, which is significantly smaller. Let's say, the primary logo is an icon+text, and the secondary logo is just the icon.

Can I achieve this only using HTML and CSS? If yes, how? And, if not, can anyone please assist me in accomplishing this?

I am currently using only HTML and CSS

Answer 1

If it's a logo, it should be vector, like .svg, and that will be crispy no matter what size it is.

The best approach is to make the logo resize with the width of the screen. We can set the logo's max-width to 200px, where the 200px is the initial size, along with the width: 100%;, and then turn off the logo text where it's too large for the screen. Like so, for example:

#logo {
  width: 100%;
  max-width: 320px; /*the initial width of the logo*/
  height: 370px;
}

.text-of-logo {
  font-size: 40px;
}

@media (max-width: 260px) { /*the brake-point to turn off text*/
  .text-of-logo {
    display: none;
  }
}

<svg aria-hidden="true" id="logo" class="native svg-icon iconLogoGlyphMd" viewBox="0 0 32 37"><path d="M26 33v-9h4v13H0V24h4v9h22Z" fill="#BCBBBB"></path><path d="m21.5 0-2.7 2 9.9 13.3 2.7-2L21.5 0ZM26 18.4 13.3 7.8l2.1-2.5 12.7 10.6-2.1 2.5ZM9.1 15.2l15 7 1.4-3-15-7-1.4 3Zm14 10.79.68-2.95-16.1-3.35L7 23l16.1 2.99ZM23 30H7v-3h16v3Z" fill="#F48024"></path><span class="text-of-logo">StackOverflow</span></svg>