ナビゲーションバーが背景画像を押し上げる

Question

良い午後/夕方誰もが、ページ上の背景画像を押す中央のナビゲーションバーで問題が発生しています。ここで

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; 
} 

は、私が試してみました。この時点で、背景を押し下げないようにドロップダウンのための希望さまざまな方法が無用です。助けることができる人がいれば、それは認められるでしょう！

Answer 1

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%;} 

     }