Question

Rookie在这里试图自己学习代码..我遇到了一个问题，我的Navbar-collapse现在与我的页面内容重叠，这次是一个问题，因为我喜欢导航栏的背景 - 崩溃有背景：透明; ..我的Jquery很糟糕，但我认为它可能需要在这里使用..它还需要考虑下拉菜单..因为他们可能需要将页面的主体向下推..我的代码：

<body>

    <!-- Start Navbar -->
    <nav class="navbar navbar-default" role="navigation" id="myNavbar">
        <div class="container">

            <!-- Brand and Toggle get grouped -->
            <div class="navbar-header">
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target ="#navbar-responsive-collapse">
                    <span>Tap me!</span>
                </button>
                <a href="#"><img src="images/pencil-logo-80x80.png" class="navbar-brand" alt="Our Brand: Folio"></a>
                <a href="#" id="navLogo" class="navbar-brand">Folio</a>
            </div><!-- end navbar-header -->

            <div class="collapse navbar-collapse" id="navbar-responsive-collapse">
                <ul class="nav navbar-nav navbar-right">

                    <li class="active"><a href="#">Home</a></li>

                    <li class="dropdown hidden-sm">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Services</a>
                        <ul class="dropdown-menu" role="menu">
                            <li id="borderTop"><a href="#">Services</a></li>
                            <li><a href="#">Services Small</a></li>
                        </ul><!-- end menu -->
                    </li>

                    <!-- delete class="dropdown-toggle" data-toggle="dropdown" to make the dropdown only open on hover -->
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Portfolio</a>
                        <ul class="dropdown-menu" role="menu">
                            <li id="borderTop"><a href="#">Portfolio 2 Column</a></li>
                            <li><a href="#">Portfolio 3 Column</a></li>
                            <li><a href="#">Portfolio 4 Column</a></li>
                            <li><a href="#">Single Column</a></li>
                        </ul><!-- end menu -->
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Pages</a>
                        <ul class="dropdown-menu" role="menu">
                            <li id="borderTop"><a href="#">About Me</a></li>
                            <li><a href="#">Team Page</a></li>
                            <li><a href="#">Page Sticky Header</a></li>
                            <li><a href="#">Background Video</a></li>
                            <li><a href="#">Preloader</a></li>

                        </ul><!-- end menu -->
                    </li>

                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Blog</a>
                        <ul class="dropdown-menu" role="menu">
                            <li id="borderTop"><a href="#">Blog Overview Grid</a></li>
                            <li><a href="#">Blog Sidebar</a></li>
                            <li><a href="#">Blog Post</a></li>
                        </ul><!-- end menu -->
                    </li>

                    <li><a href="#">Contact</a></li>

                </ul><!-- end navbar-right -->
            </div><!-- end navbar-responsive-collapse -->

        </div><!-- end container -->
    </nav><!-- end navbar -->

    <!-- Start Intro -->
    <div class="headerWrapper" id="intro">
        <h1>Hello. I'm Folio a <strong>small</strong> creative portfolio</h1>
        <p>Specialized in design and coding graphics and websites.</p>
    </div><!-- end Intro -->

</body>

CSS：

/*-------------------------------
      Global Styles
---------------------------------*/
body {
background: url('http://www.controltheweb.com/images/desktop-background-large/magneticField.jpg')    no-repeat center center fixed;
/*-- Makes backgrnd responsive --*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#intro {
text-align: center;
margin-top: 120px;
font-family: Paytone One;
}

嗯，不确定是否需要更多的CSS，但导航栏功能很好..它只是重叠我的页面标题，就像bootstrap一样，但背景：透明;它看起来很可怕..我能想到用css / html做这个的唯一方法就是以某种方式使用填充但我认为幻灯片效果会更好看... thnx提前

这是一个显示我的问题的bootply：http://www.bootply.com/n7dkI2ZpVX

Answer 1

如果我理解了这个问题，那么你想要的是在下拉列表打开后内容应该向下移动。一旦导航菜单崩溃，应该返回。如果这是正确的，您需要做的就是从#myNavbar

中删除固定的高度

#myNavbar {
    /* height: 80px; */
    margin-top: 30px;
    background: transparent;
    border: none;
}

如何在导航栏切换下为身体设置动画？

1 个答案: