CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
vester
vester

Reputation: 455

Navbar overlapping content in Bootstrap 4

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

Upvotes: 2

Views: 11575

Answers (3)

tnJed
tnJed

Reputation: 917

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

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

Upvotes: 0

Adolfo Onrubia
Adolfo Onrubia

Reputation: 1831

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

Upvotes: 3

Daniel Ogliari
Daniel Ogliari

Reputation: 1

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>

Upvotes: 0

Related Questions