Twitter Bootstrap Navbar Fixed Top Overlapping Site

twitter bootstrap navbar fixed top overlapping site

Your answer is right in the docs:

Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.

and in the Bootstrap 4 docs...

Fixed navbars use position: fixed, meaning they’re pulled from the
normal flow of the DOM and may require custom CSS (e.g., padding-top
on the ) to prevent overlap with other elements.

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 <body>. Try out your own values or use our
snippet below. Tip: By default, the navbar is 50px high.

body { padding-top: 70px; }

Make sure to include this after the core Bootstrap CSS.

I think if it takes two lines on non-mobile viewport, you can set

@media screen and (min-width: 768px) {
    body { padding-top: 100px; }
}

twitter bootstrap navbar fixed top overlapping page after navigation

The issue can be solved by giving the anchors positive padding and negative margins like this:

.anchor {
    padding-top: 73px;
    margin-top: -73px;
}

as explained here: Page scrolls to top also fixed navbar when external link opens Tab

Navbar overlapping content in Bootstrap 4

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

Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines

$(window).on('resize load', function() {
    $('body').css({"padding-top": $(".navbar").height() + "px"});
});

http://jsbin.com/iJaJAzIM/2/edit

postion fixed navbar overlap other content

Replace your body with the below code.

body {
  font-family: "Roboto", sans-serif;
  padding-top: 80px;
}

.brand-logo {
  width: 80px;
  padding-right: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.union-logo-img {
  width: 100%;
}

.dropdown {
  font-size: 1.2rem;
  margin-right: 8px;
}

.fa-arrow-right {
  font-size: 0.8rem;
  margin-right: 2em;
  margin-left: 0.3em;
}

.secion-dropdown,
.fa-arrow-right {
  color: #1a1818;
  text-decoration: none;
  transition: all 0.3s ease-out;
}

.secion-dropdown:hover {
  text-decoration: none;
  color: #e14f17;
}

.secion-dropdown:hover>.fa-arrow-right {
  transform: rotate(90deg);
  color: #e14f17;
}

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
  <link rel="stylesheet" href="/union project/style.css" />
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  <script src="https://kit.fontawesome.com/fa5117c01c.js" crossorigin="anonymous"></script>
  <link rel="icon" href="img/Union-U-Orange.png" />
  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet" />
  <title>UNION BINDINGS CO.</title>
</head>
<body>
  <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"><img src="/union project/img/Union-U-Orange.png" alt="Logo" class="union-logo-img" /></a>

    <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
      <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Products<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">All mountain</a>
              <a class="dropdown-item" href="#">Freestyle</a>
              <a class="dropdown-item" href="#">Splitboarding</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Technology<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">100% Focus</a>
              <a class="dropdown-item" href="#">Forged Carbon</a>
              <a class="dropdown-item" href="#">Jet Fusion Printing</a>
              <a class="dropdown-item" href="#">Union Specific Technology</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Team<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">International Team</a>
              <a class="dropdown-item" href="#">Team Movie</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Support<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Size Chart</a>
              <a class="dropdown-item" href="#">Disk Fit</a>
              <a class="dropdown-item" href="#">How to Set up Your Bindings</a>
            </div>
          </div>
        </li>
        <li class="nav-item active">
          <div class="dropdown">
            <a href="" class="secion-dropdown" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Contact<i class="fas fa-arrow-right"></i
              ></a>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Local Shops</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Distributors</a>
            </div>
          </div>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</body>

Logo overlap in bootstrap twitter navbar

give your logo a class of "logo" then add:

.logo {
 position: fixed;
 top: 1em;
 left: 1em;
 display: inline;
}

fix your nav bar as well.

Hope that helps!

Bootstrap 3 navbar-fixed-top overlaps with content

Add this in your style

 body{
   margin-top:70px;
 }
 @media(max-width: 768px){
   body{
     margin-top:180px;
    }
 }

Bootstrap navbar-fixed-top overlapping carousel slider

Add this to your CSS:

#carousel-example-generic {
    margin-top:150px;
}

Twitter Bootstrap Navbar Fixed Top Overlapping Site