Navbar overlapping content in Bootstrap 4

bootstrap navbar
bootstrap navbar and content
bootstrap sidebar overlapping content
bootstrap navbar overlapping div label
sticky navbar overlaps
bootstrap navbar-expand over content
bootstrap top navbar template
bootstrap container overlap

My portfolio page has a sticky navbar, but when I click on the navbar links it overlaps the text in each section. In about, it overlaps the text. In "portfolio" and "about" it overlaps both tiles. I tried to compensate with some padding-top in each section to no avail.

Here is the complete navbar:

<nav class="navbar navbar-toggleable-md navbar-light bg-faded fixed-top" style="background-color: #fc7a57;">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
        <a class="navbar-brand mr-auto navfont" href="#">portfolio.</a>

            <ul class="nav navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="#about"><i class="fa fa-user-circle-o" aria-hidden="true"></i> about</a>
                </li>

              <li class="nav-item">
                    <a class="nav-link text" href="#portfolio"><i class="fa fa-picture-o" aria-hidden="true"></i> portfolio</a>
              </li>

              <li class="nav-item">
                    <a class="nav-link text" href="#contact"><i class="fa fa-envelope-o" aria-hidden="true"></i> contact</a>
              </li>

           </ul>
    </nav>

And here's the CSS code for one of the sections

 #contact {
  background-color: #466365;
  width: 100%;
  height: 100%;
  padding-top:50px;
  color: white;
}

https://codepen.io/pablovester/pen/ZKJxLL

Thank you guys

First thing wrong I see is you are using ID's to style elements, NO, use class. You are using ID "portfolio" in more than 1 element while Id should be unique in document. Anyway to fix your problem just add margin-top: 100px; will be enough

.portfolio {
  background-color: #bcd39c;
  width: 100%;
  height: 100%;
  padding-top:50px;
  margin-top:100px;
}

and add a class in html

<div id="portfolio" class="portfolio"> 

and also in other needed IDS. Hope it helps! I'm working on this site and did exactly what you are trying to achieve, check it out

Bootstrap navbar overlapping body content, Acoording to bootstrap navbar-fixed-top docs: Body padding required. The fixed navbar will overlay your other content, unless you add padding to the top of the . Fixed scrolling navbar overlaps content. MDB Home Page. Support Main Page. General Bootstrap questions. Topic: Fixed scrolling navbar overlaps content. matthias_deox pro asked 4 years ago. 1 0. When using the fixed scrolling navbar and the page is scrolled to the top, the navbar overlaps actual content. Is there a component that can be used to add a margin to the element after the navbar to fix this issue?

Take a look at this HTML source and check if help you. Don't forget to copy all links at CSS and Javascript Settings section.

https://codepen.io/danogliari/pen/gWQWqo

<nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        <a class="navbar-brand" href="#">Daniel Ogliari</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse navbar-right" id="navbarCollapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#about">About</a></li>
          <li><a href="#profile">Portfolio</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

Bootstrap navbar content overlap issue - fixed it, fix though? Original: I finally got my navbar to look the way I want it to (thanks to som… Bootstrap navbar content overlap issue - fixed it. Bootstrap navbar mellyynda October 9, 2019, 7:43am #4. So I haven't found a  Why does navbar-fixed-top still overlap the subsequent content (container div)? I don't know why I have to use padding here, it should be smart enough to figure it out. I don't think padding by pixels is reliable since Bootstrap 4 is moving to ems, right?

My solution to this same problem in Bootstrap 4 is...

.navbar-nav > .nav-item > a {
position: relative; 
}

Bootstrap 4, in and out of your Bootstrap 4 series, but I have a question Why does navbar-​fixed-top still overlap the subsequent content (container div)?. Warning: session_start(): open(/var/lib/php/fpm/session/sess_i07haqni8lg1899h4nup5mmg00, O_RDWR) failed: No such file or directory (2) in /var/www/acc01/wp-content

Navbar overlapping content on mobile device, the problem is, that on mobile devices the navbar is overlapping the content, and because my navbar is higher than the height of theoad asked 4 years ago. Bootstrap 4 Navbar Tutorial. Navigation menu bar is part of each pages on a website. Bootstrap 4 uses the base nav component to create navigation bar (shortly navbar). This helps to create different styles of navigation with the default precompiled component, eliminating the need to code on your own.

Fixed Top Navbar Example for Bootstrap, This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to  Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements. For navbars that never collapse, add the .navbar-expand class on the navbar.

Bootstrap navbar overlaps content in the default templates · Issue , Bootstrap navbar overlaps content in the default templates when you resize browser window. Possibly a quick fix but would save a lot of time  Basic Navbar. With Bootstrap, a navigation bar can extend or collapse, depending on the screen size. A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).

Comments
  • ¡Hola Adolfo! ¡Gracias! (Escribiré el resto en inglés para que todos entiendan) The padding top solved the thing but most importantly, I'll pick your id and class comments for the future, to write nice and clean code. Thank you!
  • Me alegra haberte podido ayudar aunque mi inglés sea flojito.