我的“搜索框和社交图标”隐藏在我的主菜单后面。这可能是因为我的 .hide-menu 类。我有一个 jQuery 插件,它使主菜单在向上滚动时出现,在向下滚动时消失。 我想要实现的是“搜索框和社交图标”DIV 始终显示在主菜单下方。这可能吗?
我的 fiddle ... FIDDLE LINK HERE
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
color: #fff;
}
.menu-container {
background-color: #fff;
border-bottom: 1px solid #000;
border-top: 1px solid #000;
min-height: 20px;
position: relative;
}
.navbar-nav a:hover {
color: #000;
}
.navbar-nav a:link {
font-size: 12px;
font-family: 'century schoolbook';
color: #000;
/*text-decoration: overline;
text-decoration-color: #A10000*/
}
.brand-name a {
text-decoration: none;
}
.brand-name img {
max-width: 137px;
padding: 8px;
/*position:absolute;*/
left: 0;
}
ul {
list-style-type: none;
}
.navbar-form input,.form-inline input {
width: auto;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 80px;
}
.navbar-default .navbar-nav > li > a {
color: #A10000;
font-family: 'LuzSans-Book';
font-size: 15px;
font-weight:bold
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #A10000;
color: #000;
margin-top:4px;
margin-bottom:4px;
}
.navbar-default .navbar-nav > .active > a {
background-color: #000;
margin-top:4px;
margin-bottom:4px;
}
.navbar-custom-social {
height: 15px;
float: right;
clear: none;
margin-right: 25px;
}
.navbar-fixed-top {
padding-top: 0;
}
#search-social {
margin-bottom:20px
}
header.site_header {
box-shadow: 0 1px 6px rgba(0,0,0,.35);
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: 999;
-webkit-transition: top .5s;
transition: top .5s;
background-color: #fff;
}
header.site_header.hide-menu {
top: -90px;
}
<header class="site_header root" id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<!-- <div class="clearfix container navbar-fixed-top"> -->
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=
".navbar-collapse" data-toggle="collapse" href=
"#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<a href="#"><img alt="NAME" src=
"/images/LOGO.png"></a>
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
MENU ITEMS
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<div id="search-social" class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix search_and_social">
<div class="clearfix navbar navbar-custom-search">
SEARCH BOX
</div>
<div class="clearfix navbar navbar-custom-social">
SOCIAL ICONS
</div>
</div>
</div>
</div>
</div>
</div>
最佳答案
最简单的可能是在 .site_header
和 #search-social
之间使用同级选择器。确保 #search-social
已定位。像这样的东西:
#search-social {
margin-bottom: 20px;
position: relative;
}
header.site_header ~ #search-social {
top: 40px;
}
header.site_header.hide-menu ~ #search-social {
top: 0px;
}
示例(带有测试按钮):https://jsfiddle.net/7f6q75h8/2/
注意:顶部样式需要根据菜单高度进行一些调整。
关于html - 两个DIV在同一个地方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37374721/