20

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

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

当然，我在其他页面（全宽和 404）中的标题存在这种问题。

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

信息：

让我知道，我怎样才能在所有分辨率上修复它。

4

8 回答 8

21

响应在页面中：

Twitter Bootstrap - 顶部导航栏阻止页面的顶部内容

添加到您的 CSS：

body { 
    padding-top: 65px; 
}

或更复杂但响应迅速的解决方案，如果您的导航栏更改高度（平板电脑中的 ex 出现在 60 像素以上；或者不同），请使用带有 css 和 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：

<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>
于 2014-08-26T05:41:51.927 回答
11

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

于 2014-09-23T22:58:40.527 回答
3

position: sticky而不是position: static为我做了伎俩。

于 2018-12-15T13:49:09.283 回答
0

我会这样做：

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

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

于 2015-04-30T18:30:33.080 回答
0 
var navHeight = $("#menu").height();
$("body").css({paddingTop: (navHeight+12)+'px'});

试试这个简单的方法。

于 2022-01-25T14:05:54.320 回答
0

可以将 body 的 paddingTop 变量设置为导航栏的高度也可以工作，并且随后比固定的 60/65px 值更敏感。

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

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

jQuery：

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

香草JS：

document.querySelector(".navbar-toggler").onclick = function(){
            setTimeout(function(){
                let padding = document.querySelector("nav").offsetHeight + "px";
                document.body.style.paddingTop=padding;
            }, 500)
        };
于 2020-11-25T21:39:26.213 回答
0

只需在内容中添加一个 id 或类，然后给它一个足够的边距以使内容显示而不会受到静态导航栏的阻碍，并添加“！important”属性以使其工作......

于 2019-04-18T23:33:22.537 回答
0

试试看。它将保留导航栏的固定属性

.navbar{
  top:0;
  position:fixed;
}

于 2022-02-22T15:05:28.403 回答