导航栏固定顶部包含内容

导航栏固定顶部包含内容

本文介绍了引导程序-导航栏固定顶部包含内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我对navbar-fixed-top有疑问.好吧,我有一个简单的问题.我固定的导航栏涵盖了内容,例如在关于我们"页面中,它包含带有关于我们"标题的行.

I have a question about navbar-fixed-top. Well, I have a simple problem with it. My fixed navbar covers content, for example in "About us" page, it covers row with "About us" title.

我不知道如何解决它,因为当我调整网站大小(移动设备的大小)时,标题是可见的.

I have no idea how can I fix it, because when I resize website (mobile devices size) the header is visible.

当然我在其他页面(全角和404)中的页眉也有这种问题.

Of course I have this kind of problem with headers in other pages (Full Width and 404).

此外,在索引"页面中,它涵盖了一些轮播滑块.

Also, in Index page, it covers some of carousel slider.

信息:

bootstrap 2.3.2

bootstrap 2.3.2

让我知道,如何解决所有分辨率问题.

Let me know, how can I fix it on all resolutions.

推荐答案

响应在页面中:

添加到CSS:

body {
    padding-top: 65px;
}

或更复杂但可以响应的解决方案,如果您的导航栏更改了高度(平板电脑中的ex出现了60像素以上;或者不同),请使用css和javascript混合解决方案

or a more complex solution but responsive, if your navbar change the height( ex in tablets appears in more to 60px; or is different ) use a mixed solution with css and javascript

CSS:

    #godown{
   height: 60px;
}

HTML(恢复)

<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...

</nav>

<!-- This div make the magic :) -->

<div class="godown-60" id="godown"></div>

<!-- the rest of your site -->
...

JAVASCRIPT:

JAVASCRIPT:

<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position

    $("#navMenu").resize(function () {
        $('#godown').height($("#navMenu").height() + 10);
    });

    if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);

</script>

这篇关于引导程序-导航栏固定顶部包含内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 12:02