J'essaie de rendre cette barre de navigation réactive et je n'ai pas trouvé de code qui fonctionne dans cet exemple. Lorsque j'ajuste la largeur de l'écran, je veux que tous les liens (pas le logo) soient rassemblés dans une icône de hamburger, donc en mode portrait, il n'affichera que le logo et l'icône de hamburger avec les liens.

https://www.w3schools.com/howto/tryit.asp?filename= tryhow_js_responsive_navbar_dropdown Cet exemple est très proche de ce que je voudrais, mais le contenu de ma barre de navigation est centré avec un logo entre les liens, et je ne pouvais pas le faire fonctionner. Je souhaite également que le troisième élément (le logo) soit affiché à la place du premier lien (lorsque la largeur atteint un certain point). Toute aide serait grandement appréciée

nav{
  display: flex;
  width: 100%;
  height: 17%;
  background: black;
  align-items: center;
  justify-content: center;
  font-family: Times New Roman;
  font-size: 1.5vw;
    position: fixed;
    top: 0;
    z-index: 1;
}

nav a{
  text-decoration: none;
  background-color: white;
  color: black;
  margin: 0 40px;
  padding: 16px;
  border: 3px solid #f9c534;
}

#logo{
  width: 7vw;
  height: auto;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 0 5vw;
}


.dropbtn {
  padding: 16px;
  background: white;
  font-family: Times New Roman;
  font-size: 1.5vw;
  color: black;
  border: 3px solid #f9c534;
  margin: 0 40px;
}


.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
    margin: 0;
  text-decoration: none;
  display: block;
}

nav a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown-content a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown:hover .dropdown-content {display: block;}


.dropdown:hover .dropbtn {
    background-color: #f9c534;
    border: 2px solid white;
    }
<nav>
  <a href="">Home</a>
  <a href="">News</a>
  <div><img id="logo" src="src/Logo.jpg" alt=""></div>
  <a href="">Sponsors</a>
  <div class="dropdown">
	 <button class="dropbtn">About us</button>
	<div class="dropdown-content">
		<a href="">Our employees</a>
		<a href="">About company</a>
		<a href="#">Founder</a>
	</div>
  </div>
</nav>
0
Delphinho 20 mars 2019 à 15:28

3 réponses

Meilleure réponse

Je viens de mettre à jour votre code avec quelques corrections, votre logo sera toujours au centre et le menu hamburger a également été ajouté. J'espère que cela vous aidera. Merci

nav {
        background: black;
        font-family: Times New Roman;
        font-size: 14px;
        height: 94px;
        position: fixed;
        width: 100%;
        z-index: 1;
    }
    nav ul {        
        display: flex;
        justify-content: space-around;
        align-items: center;
        list-style: none;
        padding: 0;
        margin: 0;   
        height: 94px;     
    }
    nav ul li {
        background-color: white;
        border: 3px solid #f9c534;
        position: relative;
        white-space: nowrap;
    }
    nav ul li:hover {
        background-color: #f9c534;
        border-color: #fff;
    }
    nav ul li a {
        color: black;
        display: block;
        margin: 0;
        padding: 16px;
        text-decoration: none;
    }
    nav li ul {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        display: none;
        position: absolute;
        right: -3px;
        top: 50px;
        height: auto;
        min-width: 150px;
    }
    nav ul li:hover ul {
        display: block;
    }
    nav #logo {
        border-radius: 50%;
        background: rgba(0,0,0,0.3);
        border: 0;
        padding: 0;
        width: 100px;
    }
    #mob-dropChecked {
        display: none !important;
    }
    @media only screen and (max-width: 768px) {
        nav {
            height: 60px;
        }
        nav ul {
            display: block;
            height: 60px;
            position: relative;
            top: 44px;
        }
        nav ul li {
            display: none;
        }
        nav #logo {
            display: block;
            position: absolute;
            left: 34%;
            top: -29px;
        }
        #mob-btn {
            background-image: url('https://www.shareicon.net/data/512x512/2017/05/09/885755_list_512x512.png');
            background-color: transparent;
            border: 0;
            background-repeat: no-repeat;
            background-size: contain;
            position: relative;
            top: 21px;
            height: 40px;
            width: 40px;
            padding: 13px 20px;
            z-index: 2;
        }
        #mob-dropChecked:checked ~ ul li{
            display: block;
        }
        nav li ul {
            position: relative;
            right: 0;
            top: 16px;
        }
    }
<nav>
  <label for="mob-dropChecked" id="mob-btn"></label>    
  <input type="checkbox" id="mob-dropChecked" role="button">
  <ul>
      <li><a href="">Home</a></li>
      <li><a href="">News</a></li>
      <li id="logo"><img id="logo" src="https://s.w.org/style/images/about/WordPress-logotype-alternative-white.png" alt=""></li>
      <li><a href="">Sponsors</a></li>
      <li><a href="">About us</a>
          <ul>
              <li><a href="">Our employees</a></li>
              <li><a href="">About company</a></li>
              <li><a href="#">Founder</a></li>
          </ul>
      </li>
  </ul>    
</nav>
0
Hassan Siddiqui 20 mars 2019 à 14:07

Vous pouvez supprimer le logo de la navigation et ajouter un élément d'espacement à sa place. Ensuite, utilisez la position absolue sur le logo pour le mettre en place. C'est un peu hacky, mais ça marcherait. https://codepen.io/nickberens360/pen/bZmGWy

header{
  position: fixed;
  width: 100%;
  top: 0;
}

.logo{
  display: block;
  margin: auto;
  position: absolute;
  left: 36px; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto;
  width: 200px;
  z-index: 99999999;
  top: 0;
}

.spacer{
  margin: 0 100px;
  border: 1px solid red;
}

nav{
  display: flex;
  width: 100%;
  height: 17%;
  background: black;
  align-items: center;
  justify-content: center;
  font-family: Times New Roman;
  font-size: 1.5vw;
    z-index: 1;
}

nav a{
  text-decoration: none;
  background-color: white;
  color: black;
  margin: 0 40px;
  padding: 16px;
  border: 3px solid #f9c534;
  width: 143px;
  text-align: center;
}

#logo{
  width: 7vw;
  height: auto;
  background: rgba(0,0,0,0.3);
  border-radius: 50%;
  margin: 0 5vw;
}


.dropbtn {
  padding: 16px;
  background: white;
  font-family: Times New Roman;
  font-size: 1.5vw;
  color: black;
  border: 3px solid #f9c534;
  margin: 0 40px;
}


.dropdown {
  position: relative;
  display: inline-block;
}


.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}


.dropdown-content a {
  color: black;
  padding: 12px 16px;
    margin: 0;
  text-decoration: none;
  display: block;
}

nav a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown-content a:hover {
    background-color: #f9c534;
    border: 2px solid white;
}


.dropdown:hover .dropdown-content {display: block;}


.dropdown:hover .dropbtn {
    background-color: #f9c534;
    border: 2px solid white;
}
0
bl0cklevel 20 mars 2019 à 13:23

Vous pouvez ajouter une classe à la balise wrapper div du logo img et ajoutez-y css position: absolute; top: 10px; left: 10px pour les petits appareils utilisant des requêtes multimédias css.

Sinon (non recommandé), vous pouvez utiliser deux balises img. Masquez-en un sur ordinateur et un autre sur mobile à l'aide de display: block / display: none.

0
Rishi Ranjan 20 mars 2019 à 12:48