Bonjour à tous, 

J'espère que vous allez bien. 

Dans ma formation, je dois réaliser ce menu en responsive:  

Voici mon code HTML: 

<header id="header">
		
		<div class="logo">
			<img src="images/logo/Reservia@3x.png" alt="reservia" class="logo__img">
		</div>
		
		<nav>
			<ul class="nav">
				<li class="nav__link"><a id="nav__link--hover" href="index.html#1" title="Hébergements">Hébergements</a></li>
				<li class="nav__link"><a id="nav__link--hover" href="index.html#2" title="Activités">Activités</a></li>
				<li class="nav__link"><a id="nav__link--sign" href="error.html" title="S'incrire">S'inscrire</a></li>
			</ul>
		</nav>

	</header>

Ma question est, comment je peux faire passer ma barre de <nav> en dessous du logo et la faire remonter sur 2 liens et la faire remonter en haut sur le 3eme lien comme dans l'image? 

En vous remerciant par avance pour votre aide, 

Bonjour,

où en es tu dans ton CSS ?

Et est-ce que ton html est imposé ou bien tu peux y apporter des modification ? Parce qu'actuellement avec ce html ça imposera de faire sortir du flux le 3e lien, via le CSS, ce qui n'est pas l'idéal.

-
Edité par -RR- 15 septembre 2020 à 9:15:16

Bonjour, 

Je n'ai aucune restriction, mon projet doit juste ressembler à la maquette iPhone 8. 

Merci pour ton intérêt. 

Bonjour,

dans ce cas, il vaut mieux sortir le 3e élément du menu et le mettre au même niveau que ton logo dans le html (éventuellement en ajoutant une div englobant le logo et le lien "S'inscrire").

Le positionnement sera plus simple à faire.

Par contre, il nous faudrait ton CSS afin de pouvoir t'aider.

Parce que sinon ça reviendrait à faire tout le travail à ta place, ce qui ne serait pas spécialement instructif.

Désolé je pensais l'avoir mis. Merci pour ton aide. 

Voici le CSS. 

.nav{

	display: flex;
	justify-content: space-around;
	align-items: center;

	height: 60px;
	

}

.nav__link{

    margin-right: 20px;

    list-style: none;

}

.nav__deco{

	text-decoration: none;
    color: black;

}

.nav__deco:hover{

	border-top: 2px solid #0065FC;
	color: #0065FC;

	padding-top: 30px;

}


.nav__link--sign{

	font-weight: bold;
	color:#0065FC;

}

/*Formulaire recherche*/

.search__titre{

	margin: 20px;

}

.block_search{

	margin-left: 20px;
	margin-right: 20px;
	
	display: flex;
	justify-content: flex-start;
	align-items: center;
	

}

.local{
	
	height: 50px;
	width: 60px;

	font-size: 16px;

	display: flex;
	justify-content: center;
	align-items: center;
	
	background-color: #F2F2F2;
	border-top-left-radius: 20%;
	border-bottom-left-radius: 20%;
	border: 1px solid #F2F2F2;

}

.text_city{
	
	width: 200px;
	height: 50px;

	font-size: 16px;
	font-weight: bold;

	padding-left: 10px;
	border-top: 1px solid #F2F2F2;
	border-bottom: 1px solid #F2F2F2;
	border-left: none;
	border-right: none;

}

.button_city{

	background-color: #0065FC;
	color: white;

	height: 50px;
	width: 100px;

	border-top-right-radius: 1em;
	border-bottom-right-radius: 1em;
	border: none;
	font-family: 'Raleway', Arial, Sans Serif;
	font-size: 13px;
	font-weight: bold;
	
}

.loupe{

	display: none;

}

@media screen and (max-width: 990px){

	/*Rechercher*/

	.block_search{

		justify-content: space-between;

	}

	.text_city{
	
		width: 80%;
		font-size: 20px;
	
	}

	.button_city{

		display: none;
	
	}

	.loupe{

		display: flex;
		align-items: center;
		text-align: center;
		justify-content: center;

		background-color: #0065FC;
		color: white;

		height: 50px;
		width: 60px;

		font-size: 20px;

		border-radius: 1em;
		border: none;

		margin-left: -25px;

	}

}

Bien à vous