Question

我正在尝试让导航菜单显示在滑块上方，如下所示：

问题在于我不能让它向上移动。我尝试添加以下CSS：

header { margin-top: -60px;}
and/or
.nav-main  { margin-top: -60px;}

到网站但它没有提高它。我认为这是因为导航菜单HTML正上方是clear:both div。

返回页首HTML：

<div style="margin: 0 auto; max-width: 1920px;" class="ss2-align"><script type="text/javascript">
    window['nextend-smart-slider-1-onresize'] = [];
</script>

<div data-phonefontsize="20" data-tabletfontsize="16" data-desktopfontsize="12" data-allfontsize="12" style="font-size: 8.7px; transform: translate3d(0px, 0px, 0px) perspective(1000px); margin: 0px; width: 1392px; height: 674px;" class="nextend-slider-fadeload nextend-desktop  nextend-loaded" id="nextend-smart-slider-1">
 <!-- SLIDER CODE IS HERE -->
 </div>

<script type="text/javascript">
    njQuery(document).ready(function () {
        njQuery('#nextend-smart-slider-1').smartslider({"translate3d":1,"playfirstlayer":0,"mainafterout":1,"inaftermain":1,"fadeonscroll":0,"autoplay":1,"autoplayConfig":{"duration":8000,"counter":0,"autoplayToSlide":0,"stopautoplay":{"click":1,"mouseenter":1,"slideplaying":1},"resumeautoplay":{"mouseleave":0,"slideplayed":1,"slidechanged":0}},"responsive":{"downscale":1,"upscale":0,"maxwidth":3000,"basedon":"combined","screenwidth":{"tablet":1024,"phone":640},"ratios":[1,1,0.7,0.5]},"controls":{"scroll":0,"touch":"0","keyboard":0},"blockrightclick":0,"lazyload":0,"lazyloadneighbor":0,"randomize":0,"type":"ssSimpleSlider","animation":["horizontal"],"animationSettings":{"duration":1500,"delay":0,"easing":"easeInOutQuint","parallax":1},"flux":[0,["bars"]],"touchanimation":"0"});
    });
</script>
<div style="clear: both;"></div>
</div>

<div style="clear:both;"></div>
<header>
    <div id="nav-main" class="nav-main " style="border-bottom: 2px solid rgb(237, 237, 237);">
        <div class="container">
            <div class="row">
                <div class="col-xs-12 main-nav">            
                    <nav class="site-navigation left" id="site-navigation">
                        <ul class="nav-menu clearfix" id="menu-primary">
                            <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-642 current_page_item menu-item-951" id="menu-item-951" style="padding-top: 9px; padding-bottom: 9px;"><a href="http://jillianssf.com/dev/" hidefocus="true" style="outline: medium none;">Home</a></li>
                            <!-- MENU ITEMS ARE HERE -->
                            <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-969" id="menu-item-969" style="padding-top: 9px; padding-bottom: 9px;"><a href="http://jillianssf.com/dev/blog/" hidefocus="true" style="outline: medium none;">Blog</a></li>
                        </ul>
                    </nav>      
                </div>              
            </div>
        </div>
    </div>
</header>

如果您能帮助我使用此代码，请与我们联系。

Answer 1

尝试将bottom: 81px;添加到.container div。

CSS

.nav-main .container {
    background-color: rgba(0, 0, 0, 0.6) !important;
    position: relative;
    bottom: 81px; /* add here */
    padding: 10px 0px 0px;
}

这似乎适用于Firefox和Chrome（我尝试使用devtools）。虽然导航栏顶部的白色面具（三角形物）会显示。

将导航菜单移动到覆盖滑块 - CSS顶部

1 个答案: