Partage
  • Partager sur Facebook
  • Partager sur Twitter

Menu navigation en responsive

    15 septembre 2020 à 7:50:53

    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, 



    • Partager sur Facebook
    • Partager sur Twitter
      15 septembre 2020 à 9:07:23

      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

      • Partager sur Facebook
      • Partager sur Twitter
        16 septembre 2020 à 8:12:16

        Bonjour, 

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

        Merci pour ton intérêt. 

        • Partager sur Facebook
        • Partager sur Twitter
          16 septembre 2020 à 8:22:00

          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.

          • Partager sur Facebook
          • Partager sur Twitter
            16 septembre 2020 à 15:50:25

            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 

            • Partager sur Facebook
            • Partager sur Twitter

            Menu navigation en responsive

            × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
            • Editeur
            • Markdown