2017-12-15 1 views
0

Guten Nachmittag/Abend alle, ich renne in ein Problem mit einer zentrierten Nav-Bar schob das Hintergrundbild auf einer Seite. HierNav dropdown schiebt Hintergrundbild hoch

ist der Link für die codepen: https://codepen.io/TarenDay/pen/eyNMMe html

<div class="vertical-center"> 
    <div class='container-fluid text-center'> 
     <a href="#"> 
     <img src="https://firebasestorage.googleapis.com/v0/b/pics-85b52.appspot.com/o/toucans-05%2FthinkbottLogo.png?alt=media&token=a8f84932-4d8a-478f-87f7-9dbbe25e83f6" class="img-fluid bottLogo" alt="Responsive image" width="600px"> 
     </a> 
     <br> 
     <input class="searchBar" type="text" placeholder="Search..." /> 
     <button>Go</button> 

     <!-- navbar --> 
     <nav class="navbar navbar-expand-lg navbar-light"> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
    <span class="navbar-toggler-icon"></span> 
    </button> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
      <li class="nav-item active"> 
       <li class="nav-item dropdown active "> 
       <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <h3 class="text-primary">News</h3> 
       </a> 
       <div class="dropdown-menu " aria-labelledby="navbarDropdown"> 
        <a class="dropdown-item text-primary" href="#">Thinkbott</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Site News</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="https://worldofwarcraft.com/en-us/">Blizzard</a> 
       </div> 
       </li> 

       <li class="nav-item dropdown active"> 
       <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <h3 class="text-primary">Find</h3> 
       </a> 
       <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
        <a class="dropdown-item text-primary" href="#">Weapons</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Armor</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Quests</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">NPCs</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Items</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Zones</a> 
       </div> 
       </li> 

       <li class="nav-item dropdown active "> 
       <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <h3 class="text-primary">Classes</h3> 
       </a> 
       <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
        <a class="dropdown-item text-primary" href="#">Druid</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Hunter</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Mage</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Paladin</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Priest</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Rogue</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Shaman</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Warlock</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Warrior</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Death Knight</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Monk</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Demon Hunter</a> 
       </div> 
       </li> 


       <li class="nav-item dropdown active "> 
       <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <h3 class="text-primary">Professions</h3> 
       </a> 
       <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
        <a class="dropdown-item text-primary" href="#">Alchemy</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Blacksmithing</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Enchanting</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Engineering</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Herbalism</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Inscription</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Jewelcrafting</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Leatherworking</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Mining</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Skinning</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Tailoring</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Archaeology</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Cooking</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">First Aid</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Fishing</a> 
       </div> 
       </li> 

       <li class="nav-item dropdown active"> 
       <a class="nav-link" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
        <h3 class="text-primary">Misc</h3> 
       </a> 
       <div class="dropdown-menu" aria-labelledby="navbarDropdown"> 
        <a class="dropdown-item text-primary" href="#">Suggestions</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Account Settings</a> 
        <div class="dropdown-divider"></div> 
        <a class="dropdown-item text-primary" href="#">Login</a> 
       </div> 
       </li> 
      </ul> 
     </div> 
     </nav> 
    </div> 
    </div> 
</section> 

CSS

body,html { 
    height: 100%; 
    background-color: #000 !important; 

} 

/* dragon image container */ 
.bg { 
    background-image: url('https://firebasestorage.googleapis.com/v0/b/pics-85b52.appspot.com/o/toucans-05%2Fparmentdragon%20(1).png?alt=media&token=097bc126-00fd-4d07-b018-a9dc6785b38f'); 
    background-position: center; 
    background-repeat:no-repeat; 
    background-size: 100% 100%; 
    height: auto; 
} 

.bottLogo{ 
    margin-bottom: 5%; 
} 

.searchBar { 
    width: 400px; 
    margin-bottom: 2%; 
} 

.vertical-center { 
    min-height: 100%; 
    min-height: 100vh; 

    display: flex; 
    align-items: center; 
} 

/*navbar*/ 
.navbar .navbar-nav { 
display: inline-block; 
float: none; 
vertical-align: top; 
} 

.nav-link { 
text-shadow: 4px 4px 8px rgba(0, 0, 74, 1); 
margin: 0px 30px 0px 30px; 
font-weight: bold; 
} 

.nav-link:hover { 
/* text-decoration: underline; 
    text-decoration-color: black; */ 
    box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black 
} 

/* nav hover */ 
/* .dropdown:hover .dropdown-menu { 
     display: block; 
    } */ 

.dropdown-menu { 
    background-color: silver; 

} 

h3 { 
    margin: 0; 
    -webkit-text-stroke: 1px #525C65; 
} 

Ich mag würde für die Dropdown-Liste nicht den Hintergrund nach unten drücken, an dieser Stelle habe ich versucht, viele verschiedene Methoden ohne Erfolg. Wenn es jemanden gibt, der helfen könnte, wäre das zu schätzen!

Antwort

0
below check this point i will edit code myself css and clear issue, nav top and bottom equal space in bg image. 

    Responsive the mobile view clear in search box 



    .bg { padding-top:0;height:1000px;} 

     .container-fluid{ 
      display:table-cell; 
      width:100%; 
      height: 100%; 
      vertical-align:middle; 

     } 

     .vertical-center { 
     width:100%; 
      height: 100%; 
      display:table; 
     } 

     @media(max-width:479px) 
     { 
     .searchBar { width:80%;} 

     }