All geek questions in one place

Loading tray - navbar-fixed-top covers content

I have a question about navbar-fixed-top. Well, I have a simple problem with this. My fixed navigator covers content, for example, on the About Us page, it covers the line with the title About Us.

I do not know how to fix it, because when I change the size of the website (the size of mobile devices), the title is visible.

Of course, I have such a problem with headings on other pages (Full Width and 404).

In addition, on the Index page, it covers some carousel sliders.

information:

Let me know how I can fix this at all resolutions.

+8
source share
5 answers

The answer is on the page:

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

Add to your CSS:

body { padding-top: 65px; }

or a more complex solution, but responsive if your navbar changes its height (for example, more than 60 pixels appear in the tables or differs) use a mixed solution with css and 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>
+12
source

Try class = "navbar-static-top". It still allows the navigation bar to stay on top, but does not block content.

+8
source

I would do this:

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

This should make sure that the navigation block does not stretch down and does not cover the contents of the page.

0
source

position: sticky instead of position: static did the trick for me.

0
source

Just add an identifier or class to the content, and then set a sufficient margin for it so that the content appears without a static navigation bar, and add the attribute "! Important" to make it work ...

0
source

Source: https://habr.com/ru/post/957243/

More articles:


All Articles