Question

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

我不知道如何修复它，因为当我调整网站大小（移动设备大小）时，标题会显示。

当然我在其他页面中有标题（Full Width和404）。

此外，在索引页面中，它涵盖了一些轮播滑块。

信息：

网站：http://testerix.site90.com/index.html
bootstrap 2.3.2

请告诉我，如何解决所有问题。

Answer 1

响应在页面中：

Twitter Bootstrap - top nav bar blocking top content of the page

添加到您的CSS：

body { 
    padding-top: 65px; 
}

或更复杂的解决方案但响应迅速，如果您的导航栏更改高度（平板电脑中的ex更多显示为60px;或者不同）使用带有css和javascript的混合解决方案

CSS：

    #godown{
   height: 60px;
}

HTML（resumen）

<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：

<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>

Answer 2

尝试class =＆＃34; navbar-static-top＆＃34;。它仍然允许导航栏保持在顶部，但不会阻止内容。

Answer 3

我会这样做：

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

这应该确保导航块不会向下延伸并覆盖页面内容。

Answer 4

position: sticky代替了position: static帮了我大忙。

Answer 5

只需在内容中添加一个id或类，然后在其顶部留出足够的空白以使内容显示而不会出现静态导航栏妨碍它，并添加“！important”属性以使其正常工作..... < / p>

Answer 6

可能将body的paddingTop变量设置为导航栏的高度也可以，并且比固定的60 / 65px值响应更快。

let padding = $("nav").height() + "px";

一个实际的示例是Bootstrap .navbar-toogler按钮，向其添加一个click事件以及setTimeout函数，该函数允许更改高度，然后将新值作为paddingTop应用于主体。

jQuery：

$(".navbar-toggler").click(function(){
            setTimeout(function(){
                let padding = $("nav").height() + "px";
                $("body").css("paddingTop", padding)
            }, 500)
        })

vanillaJS：

document.querySelector(".navbar-toggler").onclick = function(){
            setTimeout(function(){
                let padding = document.querySelector("nav").offsetHeight + "px";
                document.body.style.paddingTop=padding;
            }, 500)
        };

Bootstrap - navbar-fixed-top涵盖内容

6 个答案: