How to make an image slide down - html

Question

I would like to make the image in the center of the navigation bar slide down when the width of the page decreases.
This is how it looks like on a desktop:
Whereas on a smartphone the navigation bar should look like this:
As you can see, I would like the nav bar to remain as it is, except for the image to slide down the first row.
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>Home</li>
<li>Menu</li>
<li><a class="logo" href="Home.html">Cadice_foto</a></li>
<li class="mobile">Locations</li>
<li class="mobile">Contacts</li>
<li class="desktop">Locations</li>
<li class="desktop">Contacts</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>

Answer 1

This can be done with a css flex-box, and re-ordering the flex elements when your mobile view media query activates.
.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>

Answer 2

Add the following in media query below in your CSS:
.logo {
position: absolute;
top: 50px;
left: 0;
right: 0;
margin: 0 auto;
}
You may want to know what this code does. The position property specifies the type of positioning used for an element. The top property is the vertical position of a positioned element. The left and the right properties are written to reset positioning (these are "auto" by default), and then margin which is "0 auto" to align element by center. https://www.w3schools.com/css/css_margin.asp
You should probably see some info about media-queries here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
P.S. And remember DRY (Do not Repeat Yourself). Try to avoid writing twice, especially something like this:
<li class="mobile">Locations</li>
<li class="mobile">Contacts</li>
<li class="desktop">Locations</li>
<li class="desktop">Contacts</li>
You can set every property for every element in every media-query

Answer 3

I have changed your code little bit to achieve what you wanted. Here is the Code
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>Home</li>
<li>Menu</li>
<li class="logo">Cadice_foto</li>
<li>Locations</li>
<li>Contacts</li>
<!-- <li class="desktop">Locations</li>
<li class="desktop">Contacts</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>