La barre de navigation ne reste pas dans l'en-tête lorsqu'elle est réduite. Comment puis-je atteindre cet objectif?

Le problème que j'ai est que ma barre de menu ne restera pas dans l'en-tête. J'essaye de concevoir une seule page mais je n'arrive pas à voir comment empêcher le menu de nav de tomber de l'en-tête bleu quand la fenêtre est réduite.La barre de navigation ne reste pas dans l'en-tête lorsqu'elle est réduite. Comment puis-je atteindre cet objectif?

J'ai essayé d'utiliser min-height, overflow etc, mais je pense que je peux manquer quelque chose d'évident.

Puis-je avoir de l'aide/des conseils, s'il vous plaît?

Merci,

Anish

HTML

<header> 
     <div class="containernav"> 
     <img src="Images/VAC_Modern_LOGO_V3_optometrists.jpg" alt="logo" class="logo"> 
      <nav> 
       <ul> 
        <li><a href="#home">Home</a></li> 
        <li><a href="#services">Services</a></li> 
        <li><a href="#eyecare">Eye Care</a></li> 
        <li><a href="#contactus">Contact Us</a></li> 
       </ul> 
      </nav> 
     </div> 

    </header> 

    <body> 

     <div id="home"> 
      <div class="textbox"> 
       <h3>lorem</h3> 
       <p>Lorem</p> 

    </body>

CSS

@charset "utf-8"; 

    body { 
     margin: 0; 
     font-family: 'Roboto', sans-serif; 
     background: rgba(4, 26, 125, 0.5); 
    } 

    .containernav { 
     display: block; 
     width: 80%; 
     margin: 0; 
    } 

    img { 
     float: left; 
     height: 200px; 
     width: 250px; 
    } 

    header { 
     background: rgb(4, 26, 125); 
    } 

    header::after { 
     content: ''; 
     display: table; 
     clear: both; 
    } 

    .logo { 
     float: left; 
     padding: 5px 0; 
    } 

    nav { 
     float: left; 
     margin-top: 10%; 
    } 

    nav ul { 
     margin: 0; 
     padding: 0; 
     list-style: none; 
     position: absolute; 
    } 

    nav li { 
     display: inline-block; 
     margin-left: 70px; 
     padding-top: 33px; 
     position: relative; 
    } 

    nav a { 
     color: rgba(255, 255, 255, 0.5); 
     text-decoration: none; 
     text-transform: uppercase; 
     font-size: 16px; 
    } 

    nav a:hover { 
     color: rgba(249, 29, 0, 0.5); 
    } 

    nav a::before { 
     content: ''; 
     display: block; 
     height: 5px; 
     width: 0%; 
     background-color: rgb(255, 255, 255); 
     position: absolute; 
     top: 0; 
     transition: all ease-in-out 250ms; 
    } 

    nav a:hover::before { 
     width: 100%; 
    } 

    button { 
     background-color: rgba(85, 85, 85, 0.5); 
     color: rgba(255, 255, 255, 0.7); 
     height: auto; 
     width: auto; 
     padding 100px 50px; 
     cursor: pointer; 
     float: right; 
     font-size: 22px; 
    }

Source

2017-10-19 user8728954

Retirez la 'position: absolute;' sur la navigation. – NikxDa

Vérifiez le code ci-dessous.

@charset "utf-8"; 
 

 
    body { 
 
     margin: 0; 
 
     font-family: 'Roboto', sans-serif; 
 
     background: rgba(4, 26, 125, 0.5); 
 
    } 
 

 
    .containernav { 
 
      display: flex; 
 
      align-items: center; 
 
    width: 100%; 
 
    margin: 0; 
 
    } 
 

 
    img { 
 
     height: 200px; 
 
     width: 250px; 
 
    } 
 

 
    header { 
 
     background: rgb(4, 26, 125); 
 
    } 
 

 
    header::after { 
 
     content: ''; 
 
     display: table; 
 
     clear: both; 
 
    } 
 

 
    .logo { 
 
     padding: 5px 0; 
 
    } 
 

 
    nav { 
 
    } 
 

 
    nav ul { 
 
     margin: 0; 
 
     padding: 0; 
 
     list-style: none; 
 
    } 
 

 
    nav li { 
 
     display: inline-block; 
 
     margin-left: 70px; 
 
     padding-top: 33px; 
 
     position: relative; 
 
    } 
 

 
    nav a { 
 
     color: rgba(255, 255, 255, 0.5); 
 
     text-decoration: none; 
 
     text-transform: uppercase; 
 
     font-size: 16px; 
 
    } 
 

 
    nav a:hover { 
 
     color: rgba(249, 29, 0, 0.5); 
 
    } 
 

 
    nav a::before { 
 
     content: ''; 
 
     display: block; 
 
     height: 5px; 
 
     width: 0%; 
 
     background-color: rgb(255, 255, 255); 
 
     position: absolute; 
 
     top: 0; 
 
     transition: all ease-in-out 250ms; 
 
    } 
 

 
    nav a:hover::before { 
 
     width: 100%; 
 
    } 
 

 
    button { 
 
     background-color: rgba(85, 85, 85, 0.5); 
 
     color: rgba(255, 255, 255, 0.7); 
 
     height: auto; 
 
     width: auto; 
 
     padding 100px 50px; 
 
     cursor: pointer; 
 
     float: right; 
 
     font-size: 22px; 
 
    }

<header> 
 
     <div class="containernav"> 
 
     <img src="Images/VAC_Modern_LOGO_V3_optometrists.jpg" alt="logo" class="logo"> 
 
      <nav> 
 
       <ul> 
 
        <li><a href="#home">Home</a></li> 
 
        <li><a href="#services">Services</a></li> 
 
        <li><a href="#eyecare">Eye Care</a></li> 
 
        <li><a href="#contactus">Contact Us</a></li> 
 
       </ul> 
 
      </nav> 
 
     </div> 
 

 
    </header> 
 

 
    <body> 
 

 
     <div id="home"> 
 
      <div class="textbox"> 
 
       <h3>lorem</h3> 
 
       <p>Lorem</p> 
 

 
    </body>

Source

2017-10-19 17:12:27 izulito

Votre barre de navigation est assez désordonné, je vous recommande la création d'IT IS en utilisant largeur% et float. Voici un navBar basique, il sera redimensionné et restera toujours sur une ligne.

Vous pouvez le faire en utilisant du CSS pur, assurez-vous simplement que l'élément que vous voulez montrer est directement après le parent.

.navTitle { 
 
    width: 20%; 
 
    float: left; 
 
    background-color: lightGrey; 
 
    cursor: pointer; 
 
    border-bottom: 1px solid black; 
 
} 
 

 
.navTitle:hover .moreInfo { 
 
    display: inline-block; 
 
} 
 

 
.moreInfo { 
 
    margin: 0; 
 
    background-color: grey; 
 
    display: none; 
 
    width: 100%; 
 
}

<div class="navTitle"> 
 
<p>Section 1</p> 
 
<p class="moreInfo">More info 1</p> 
 
</div> 
 

 
<div class="navTitle"> 
 
<p>Section 2</p> 
 
<p class="moreInfo">More info 2</p> 
 
</div> 
 

 
<div class="navTitle"> 
 
<p>Section 3</p> 
 
<p class="moreInfo">More info 3</p> 
 
</div> 
 

 
<div class="navTitle"> 
 
<p>Section 4</p> 
 
<p class="moreInfo">More info 4</p> 
 
</div> 
 

 
<div class="navTitle"> 
 
<p>Section 5</p> 
 
<p class="moreInfo">More info 5</p> 
 
</div>

Source

2017-10-19 16:37:13

La barre de navigation ne reste pas dans l'en-tête lorsqu'elle est réduite. Comment puis-je atteindre cet objectif?

Répondre

Questions connexes