Question

我正在使用Agency - Start Bootstrap简单的一个寻呼机html主题。主题工作正常。但是我去做了一些修改，我添加了一个带有大图像的新部门。

这是我的代码。

<body id="page-top" class="index">

<div class="navbar-default  navbar-fixed-top">
<a class="navbar-brand page-scroll" href="#page-top"><img style="height:55px;width:150px;" src="http://unicca.in/images/logo.png"></img></a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>



    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
            <ul class="nav navbar-nav navbar-right  "  >
                <li class="">
                    <a href="#page-top"> Home</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Corporate</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Projects</a>
                </li>

                <li>
                    <a class="page-scroll" href="#team">Career</a>
                </li>
                <li>
                    <a class="page-scroll" href="#tools">Buyer Tools</a>
                </li>
                <li>
                    <a class="page-scroll" href="#investor">Investor</a>
                </li>

                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>


        </div>
        </div>

请查看本网站的外观

mysite

问题：我想在我的大图像之后的标题菜单。但它超越了那个形象。怎么做。我已经尝试过很多改变css但是它给出了一些其他问题。如何解决它。

我的css文件是css link

imp：如果使用的是navbar-staic-top而不是navbar-fixed-top，那么它会下降，但它不能用作固定菜单。

Answer 1

然后你改变你的html div结构就像这个用jQuery

滚动固定的位置

<div class="my-class">
<!--add banner div-->
<div class="banner">
  <img alt="myhome" style="width:100%;height:700px;"     src="http://cdn.freshome.com/wp-content/uploads/2013/08/selling-your-home-exterior-home-color.jpg">
</div> 

<!--add nv div-->
<div class="navbar-default navbar-shrink"><!--remove nav-topbar-fixed div-->
    <a class="navbar-brand page-scroll" href="#page-top"><img style="height:55px;width:150px;" src="http://unicca.in/images/logo.png"></a>
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right  ">
                    <li class="active">
                        <a href="#page-top"> Home</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Corporate</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#portfolio">Projects</a>
                    </li>

                    <li>
                        <a class="page-scroll" href="#team">Career</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#tools">Buyer Tools</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#investor">Investor</a>
                    </li>

                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>


            </div>
            </div>

</div>

CSS：删除固定位置

.navbar-default .navbar-collapse{
  position: fixed; /**remove**/
}

Answer 2

Nayana，你的意思是菜单会一直显示在浏览器的底部，对吧？如果是，请尝试此操作，修改agency.css并将.navbar-fixed-top{top:0px}更改为.navbar-fixed-top{bottom:0px}

代理菜单中没有修复标题菜单 - 启动Bootstrap主题

2 个答案: