导航下拉列表向上推动背景图像

时间：2017-12-15 22:20:59

标签： drop-down-menu navbar

下午好/大家晚上，我遇到一个问题，中心的导航栏会在页面上推送背景图像。

以下是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;
}

我希望下拉列表不要压低背景，此时我尝试了许多不同的方法无济于事。如果有人可以提供帮助，那将不胜感激！

1 个答案:

答案 0 :(得分：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%;}

        }
相关问题
最新问题