Me gustaría hacer que la imagen en el centro de la barra de navegación se deslice hacia abajo cuando el ancho de la página disminuya.

Así es como se ve en un escritorio:

enter image description here

Mientras que en un teléfono inteligente la barra de navegación debería verse así:

enter image description here

Como puede ver, me gustaría que la barra de navegación permanezca como está, excepto que la imagen se deslice hacia abajo en la primera fila.

body {
  background-color: gray;
  color: white;
  font-family: Helvetica Neue;
}


/* Header */

header {
  background-color: black;
  background-image: url("images/spiaggia.jpg");
  background-size: 100%;
  background-position: center;
  padding: 2px;
  color: white;
  height: 200px;
  background-repeat: no-repeat
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

div {
  background-color: black;
  display: inline-block;
  width: 100px;
  margin: auto;
  color: white;
}

header ul {
  margin: 0px;
  padding: 0px;
}

header li {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
}

header .mobile {
  display: none;
}

a {
  color: white;
  text-decoration: none;
}

.logo {
  background-image: url("images/città.jpg");
  background-size: 100px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 50px;
  position: relative;
  text-indent: -999999px;
  top: 0px;
  width: 100px;
  border: solid lightblue;
}


/* Features */

.features {
  background: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.features figure {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 10%;
  box-shadow: gray 0 0 10px;
  width: 200px;
}


/* Footer */

footer {
  background: black;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
  padding: 20px 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .mobile {
    display: inline-block;
  }
  .desktop {
    display: none;
  }
}
<header>

  <ul>
    <li><a href="Home.html">Home</a></li>
    <li><a href="website/Menu.html">Menu</a></li>
    <li><a class="logo" href="Home.html">Cadice_foto</a></li>

    <li class="mobile"><a href="website/Locations.html">Locations</a></li>
    <li class="mobile"><a href="website/Contacts.html">Contacts</a></li>


    <li class="desktop"><a href="website/Locations.html">Locations</a></li>
    <li class="desktop"><a href="website/Contacts.html">Contacts</a></li>
  </ul>

</header>
<section class="features">
  <figure>
    <img src="images/porticciolo.jpg" alt="porticciolo Cadice">
    <figcaption>Porticciolo Cadice</figcaption>
  </figure>

  <figure>
    <img src="images/palme.jpg" alt="palme Cadice">
    <figcaption>palme Cadice</figcaption>
  </figure>

  <figure>
    <img src="images/sera.jpg" alt="sera Cadice">
    <figcaption>sera Cadice</figcaption>
  </figure>


</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - email@email.com</footer>
1
Carl 11 may. 2019 a las 17:17

3 respuestas

La mejor respuesta

Esto se puede hacer con un css flex-box, y reordenando los elementos flexibles cuando se activa su consulta de medios de vista móvil.

.menu-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.menu-container>* {
  padding: 10px;
  flex: 1 20%;
}

@media all and (min-width: 600px) {
  .menu-container>* {
    flex: 1;
    counter-increment: menulink;
    order: counter(menulink);
  }
  .menu-left {
    order: 1
  }
 .menu-right {
    order: 3
  }
  .logo-menu {
    order: 2;
 }
}
body {
  background-color: gray;
  color: white;
  font-family: Helvetica Neue;
}

/* Header */

header {
  background-color: black;
  background-image: url("http://placekitten.com/1000/500?image=6");
  background-size: 100%;
  background-position: center;
  padding: 2px;
  color: white;
  height: 200px;
  background-repeat: no-repeat
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

a {
  color: white;
  text-decoration: none;
}

.logo {
  background-image: url("http://placekitten.com/200/100");
  background-size: 100px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 50px;
  position: relative;
  text-indent: -999999px;
  top: 0px;
  width: 100px;
  border: solid lightblue;
}

/* Features */

.features {
  background: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.features figure {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 10%;
  box-shadow: gray 0 0 10px;
  width: 200px;
}

/* Footer */

footer {
  background: black;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
  padding: 20px 20px;
  text-align: center;
}

.menu-container {
  display: flex;
  flex-flow: row wrap;
  text-align: center;
}

.menu-container>* {
  padding: 10px;
  flex: 1 20%;
}

@media all and (min-width: 600px) {
  .menu-container>* {
    flex: 1;
    counter-increment: menulink;
    order: counter(menulink);
  }
  .menu-left {
    order: 1
  }
  .menu-right {
    order: 3
  }
  .logo-menu {
    order: 2;
  }
}
<!DOCTYPE html>
<html>

  <head>
    <title></title>
    <link rel="stylesheet" href="11.css" type="text/css" />
  </head>

  <body>
    <header class="menu-container">
      <a class="menu-left" href="Home.html">Home</a>
      <a  class="menu-left" href="website/Menu.html">Menu</a>
      <a  class="menu-right"href="website/Locations.html">Locations</a>
      <a  class="menu-right" href="website/Contacts.html">Contacts</a>
      <div class="logo-menu"><a class="logo" href="Home.html">Cadice_foto</a></div>
    </header>
    <section class="features">
      <figure>
        <img src="http://placekitten.com/150/150?image=2" alt="porticciolo Cadice">
        <figcaption>Porticciolo Cadice</figcaption>
      </figure>

      <figure>
        <img src="http://placekitten.com/150/150?image=8" alt="palme Cadice">
        <figcaption>palme Cadice</figcaption>
      </figure>

      <figure>
        <img src="http://placekitten.com/150/150?image=4" alt="sera Cadice">
        <figcaption>sera Cadice</figcaption>
      </figure>
    </section>
    <section>lower-section</section>
    <footer>Via Lars, somewhere IT - numero: uno!- email@email.com</footer>
  </body>

</html>
3
Lars 11 may. 2019 a las 15:04

Agregue lo siguiente en la consulta de medios a continuación en su CSS:

.logo {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

Es posible que desee saber qué hace este código. La propiedad position especifica el tipo de posicionamiento utilizado para un elemento. La propiedad top es la posición vertical de un elemento posicionado. Las propiedades izquierda y derecha se escriben para restablecer el posicionamiento (estas son "automáticas" por defecto), y luego margen que es "0 automático "para alinear elemento por centro. https://www.w3schools.com/css/css_margin.asp

Probablemente debería ver alguna información sobre consultas de medios aquí: https: //developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

PD Y recuerde DRY (no se repita). Intenta evitar escribir dos veces, especialmente algo como esto:

            <li class="mobile"><a href="website/Locations.html">Locations</a></li>
            <li class="mobile"><a href="website/Contacts.html">Contacts</a></li>


            <li class="desktop"><a href="website/Locations.html">Locations</a></li>
            <li class="desktop"><a href="website/Contacts.html">Contacts</a></li>

Puede establecer cada propiedad para cada elemento en cada consulta de medios

3
Laura Taylor 11 may. 2019 a las 15:07

He cambiado un poco tu código para lograr lo que querías. Aquí está el Código

body {
  background-color: gray;
  color: white;
  font-family: Helvetica Neue;
}


/* Header */

header {
  background-color: black;
  background-image: url("https://www.hotelsantamargherita.it/wp-content/uploads/2017/12/caorle-dalla-spiaggia-di-pon-1440x500.jpg");
  background-size: 100%;
  background-position: center;
  padding: 2px;
  color: white;
  height: 200px;
  background-repeat: no-repeat;
}

section {
  background-color: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

div {
  background-color: black;
  display: inline-block;
  width: 100px;
  margin: auto;
  color: white;
}

.navbar {
  margin: 0px;
  padding: 0px;
  text-align: center;
  position: relative;
}

.navbar li {
  text-decoration: none;
  display: inline-block;
  margin-right: 20px;
}

.navbar li a {
  color: white;
  text-decoration: none;
}

.logo a {
  background-image: url("http://www.florenceholidays.com/image/66-05.jpg");
  background-size: 100px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 50px;
  position: relative;
  text-indent: -9999px;
  top: 0px;
  width: 100px;
  border: solid lightblue;
}


/* Features */

.features {
  background: white;
  color: gray;
  padding: 20px;
  display: flex;
  flex-direction: row;
}

.features figure {
  margin: auto;
  text-align: center;
  text-transform: uppercase;
  width: 200px;
}

.features figure img {
  border: 1px solid white;
  border-radius: 10%;
  box-shadow: gray 0 0 10px;
  width: 200px;
}


/* Footer */

footer {
  background: black;
  padding: 10px 20px;
  color: gray;
  font-size: 12px;
  padding: 20px 20px;
  text-align: center;
}

@media (max-width: 600px) {
  .logo {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translatex(-50%)
  }
}
<header>
  <ul class="navbar">
    <li><a href="Home.html">Home</a></li>
    <li><a href="website/Menu.html">Menu</a></li>
    <li class="logo"><a href="Home.html">Cadice_foto</a></li>
    <li><a href="website/Locations.html">Locations</a></li>
    <li><a href="website/Contacts.html">Contacts</a></li>
    <!--     <li class="desktop"><a href="website/Locations.html">Locations</a></li>
    <li class="desktop"><a href="website/Contacts.html">Contacts</a></li> -->
  </ul>
</header>

<section class="features">
  <figure>
    <img src="https://picsum.photos/200/300" alt="porticciolo Cadice">
    <figcaption>Porticciolo Cadice</figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/200/300" alt="palme Cadice">
    <figcaption>palme Cadice</figcaption>
  </figure>

  <figure>
    <img src="https://picsum.photos/200/300" alt="sera Cadice">
    <figcaption>sera Cadice</figcaption>
  </figure>

</section>
<section>lower-section</section>
<footer>Via Condotti, Roma IT - numero: 02.123456 - email@email.com</footer>
1
Mobarak Ali 11 may. 2019 a las 15:28