How can i prevent from navbar from overlapping title?

I'm currently having some issues with my navbar. Right now it looks like image one but I want to make it look like image 2. How would I do that? Is it something on CSS that I have to add?

/* Nav Bar*/
.navbar-brand{
    height: 3.5rem;
}

.navbar-nav li {
    padding-right: 0.1rem;
}

.nav-link {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-item:hover {
    border-bottom: 1px solid #FF7200;
}

.nav
{
    
}
<body>
  <!--Navigation-->
  <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
    <div class="container-fluid">
      <img class="navbar-brand" src="../img/IMG_0537.PNG" alt="KAJ Construction Logo"/>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#section-Services" >Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Gallery" >Gallery</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section-Contact" >Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

How it currently looks when services link is clicked How I want it to look like

3 answers

  • answered 2019-10-08 03:30 disc_code22

    If you want clicking the navigation to scroll the page fully to the top of the page you can use:

    <a href="#"> Will Scroll to Top when clicked </a>
    

    The a element with href="#" will scroll to the top of the page when clicked.

  • answered 2019-10-08 03:40 narayan maity

    Add some built-in bootstrap margin and padding like mt-3 (mt means margin-top ) use p-2 (padding from every side) 2 and 3 defines 2rem or 3rem use this it will fix

  • answered 2019-10-08 03:56 symlink

    Since your header is position: fixed, you need to give the content of your page a margin-top equal to its height:

    /* Nav Bar*/
    .navbar-brand{
        height: 3.5rem;
    }
    
    .navbar-nav li {
        padding-right: 0.1rem;
    }
    
    .nav-link {
        font-size: 1.1rem;
        font-weight: 500;
    }
    
    .nav-item:hover {
        border-bottom: 1px solid #FF7200;
    }
    
    main{
        margin-top: 72px;
    }
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
    <body>
      <!--Navigation-->
      <nav class="navbar navbar-expand-md navbar-light bg-light fixed-top">
        <div class="container-fluid">
          <img class="navbar-brand" src="http://placekitten.com/200/200" alt="KAJ Construction Logo"/>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#section-Services" >Services</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#section-Gallery" >Gallery</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#section-Contact" >Contact Us</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <main>
      <h1>Our Services</h1>
      </main>