web-dev-qa-db-fra.com

Cadre Materialise: logo réactif dans la barre de navigation

Je crée un site Web dans un cadre matérialisé. J'ai un problème avec le logo dans la barre de navigation. Donc mon logo est très grand (6202x3800 px) et je n'ai pas d'autre version. Je veux mettre ce logo dans la barre de navigation mais il dépasse toujours le cadre de nav-wrapper. J'ai essayé d'ajouter la classe responsive-img mais ça n'a pas marché du tout.

Voici mon code:

#allcontent {
  background-color: white;
  margin: 2%;
}
body {
  background: #d26335;
}
nav {
  color: black;
}

<div class="row" id="allcontent">
  <div class="navbar-default" id="navbar">
    <nav class="white">
      <div class="nav-wrapper">
        <a href="index.html" class="brand-logo left"><img class="responsive-img" id="logo" src="<!-- my image -->"/></a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="sass.html"><i class="material-icons">search</i></a>
          </li>
          <li>colors</li>
        </ul>
      </div>

    </nav>
  </div>
</div>
cssmaterial-designmaterialize
10
Filip Perz

Tout ce que vous avez à faire est de contrôler la taille de l'image avec CSS aux dimensions que vous souhaitez:

.navbar-material .nav-wrapper .brand-logo img {
    height: 64px;
}

Ou utilisez un éditeur d'image pour redimensionner l'image à quelque chose de plus raisonnable pour un logo au départ. Voir Photoshop , GIMP ou Sketch pour n'en nommer que quelques-uns.

(* Et certainement compresser des images; si vous n'utilisez pas un système de construction pour ce faire, il y a toujours quelque chose comme TINYpng )

Voir l'exemple de travail Extrait.

(** notez que toutes les classes utilisées sont par défaut MaterialCSS moins la classe .navbar-material et il semble que vous mélangez des classes Bootstrap3 avec des classes MaterialCSS)

$(".button-collapse").sideNav();
body {
  background: #d26335;
}
nav.navbar-material {
  background: #d26335;
  border: none;
  box-shadow: none;
}
.navbar-material .nav-wrapper {
  background: white;
  margin: 20px;
}
.navbar-material .nav-wrapper > ul > li > a {
  color: black;
}
.navbar-material .nav-wrapper .brand-logo img {
  height: 64px;
}
.navbar-material .nav-wrapper .button-collapse i {
  color: black;
}
@media (max-width: 600px) {
  .navbar-material .nav-wrapper .brand-logo img {
    height: 56px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav class="navbar-material">
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">
      <img src="http://placehold.it/6202x3800/FF001E/fff">
    </a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>

    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a>

      </li>
      <li><a href="badges.html">Components</a>

      </li>
      <li><a href="collapsible.html">Javascript</a>

      </li>
      <li><a href="mobile.html">Mobile</a>

      </li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="sass.html">Sass</a>

      </li>
      <li><a href="badges.html">Components</a>

      </li>
      <li><a href="collapsible.html">Javascript</a>

      </li>
      <li><a href="mobile.html">Mobile</a>

      </li>
    </ul>
  </div>
</nav>
16
vanburen