Top Nav Bar Blocking Top Content of the Page

top nav bar blocking top content of the page

Add to your CSS:

body { 
    padding-top: 65px; 
}

From the Bootstrap docs:

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

Bootstrap fixed navbar blocking content link to on the page

Found the answer:

Instead of sticky-top, I used fixed-top, then added

body {
    padding-top: 70px
}

to the CSS and

window.addEventListener("hashchange", function() { scrollBy(0, -70) })

to the script.

See here: https://jsfiddle.net/ao3b0m95/

Edit: I don't think I need the CSS, just the JS will do the job.

Bootstrap 4 Nav Bar fixed-top over content

I fixed this so now the content will always start after the fixed nav bar.

I added the below to the body css

min-height: 51.5rem;
padding-top: 2.5rem;

Thank you @ZimSystem for pointing me in the right direction.

Bootstrap top navbar blocking my content laravel

Try adding the "padding-top: 60px;" style to whatever element is wrapping the "@yield('content')" area rather than to the body element. Hopefully, that will push your content below the absolute-positioned navigation bar.

Navbar covering content when I click on a link to navigate to different sections of the page

Since the browser is doing what it is told to do properly (scrolling to the anchor's position), you have to do a little "hack" to get something like this to work. Here's the basic idea:

• Create a container element for both a title and an (unseen) anchor
• Create an element for the title, and put it in the container
• Create an element for the anchor, and put it in the container
• Use absolute positioning to move the anchor the appropriate amount up (generally something like FIXED_HEADER_HEIGHT + EXTRA_PADDING)

Here's a quick example:

.container {
  position: relative;
}

.anchor {
  position: absolute;
  top: -65px; /* given the fixed header is 50px tall, and you want 15px padding */
  left: 0px;
}

And the HTML:

<div class="container">
  <h2 class="title">Section Title</h2>
  <a class="anchor" name="target"></a>
</div>

Then, any link to #target will go to a location 65px above .title.

Why my nav-bar hides my texts in a fixed position?

It happens because fixed property remove element from main flow. You can use margin-top property for citations div.

---

Related Topics