Search code examples
responsive-designmedia-queriesgraphical-logo

I have 2 different logos. I want to use html, and css media query to make the smaller one show in mobile view

I've been a graphic designer for 14 yrs. I'm trying to learn HTML and CSS, I have 2 logos, I want one to show in desktop and tablet view. The other logo I want to show in mobile view.

The problem I'm having is I can't seem to get the css to grab the second logo when it gets to the mobile view. Should I have both logo's in the html, or will css know to grab the second logo from my folder? How does I get the media query to replace logos in different views sizes? I need to know what the html should look like and what the css should look like for the code I have.

This is my HTML:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<nav role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a class="navbar-brand" href"#" id="logo"> <img src="logo.png" </a>
<a class="navbar-brand" href"#"id="2logo"> <img src="relogo.png"</a>
</div>

This is my CSS:

@import url (assets/css/custom.css):;

body {background: black}

.btn {margin-left: 800px;}

.style {margin-left: 800px;}

.nav a{postion:relative;
    left: 20px;
 }
body {
position: relative;
top: 40px; 
}
.navbar-fixed-top .navbar-brand {
padding: 0 15px;
}

@media (max-width: 680px) {

}
Solution

  • Your HTML needs two small changes. First, the #2logo ID you are using on the second logo won't work because ID's can't start with a number. Change it to "logo2" and it'll work like a charm. Also, the second image tag is missing a closing angle bracket.

    Once those are corrected your existing html will work. The idea is to use CSS to hide the second logo by default and only show the first. Then inside a media query, show the second logo and hide the original. The css you would need to add would be... 

        #logo2 {
     display: none;
    }

    @media screen and (max-width: 680px) {
     #logo2 {
      display: block;
     }
     #logo {
      display: none;
     }
    }

    There is another way as well. You could add the logo as a background image which might be cleaner html but a little less semantic. But this way will work fine too.