0

When i click on particular link on navbar it slide down to that section of the page. But since i am using fixed navbar it hides some of the content of that section.

Ex: When i click on About on navigation menu the page slide to that section. For below example About Me is overlapped navbar.

About Me (This part is Hidden below navigation menu)
Some Random Text Here
Some More
And More....

What i want to do is that when i click on a link it should slide just enough so that every thing on that section is visible.(It means that the page should slide up till the bottom of the navigaton bar)

<body>
    <div class="nav navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
          <ul class="pull-left">
            <li class="active"><a href="#home">Home</a></li>
            <li><a href="#about">About Me</a></li>
            <li><a href="#">Resume</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
      </div>
    </div>

    <div class="parallax-overlay"></div>
    <div class="jumbotron">
      <div class="container">
        <img class="img-circle" src="img/profile.jpg" style="width: 100px;height:100px;">
        <h1>Nakib Momin</h1>
        <p>Student Blogger And Software Developer</p>
        <button type="button" class="btn btn-primary"><a href="">Learn More</a></button>
      </div>
    </div>

#CSS

body, html{height: 100%}

.nav a {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}


.parallax-overlay {
position: absolute;
left: 0;
top: 120;
width: 100%;
height: 100%;
background-image: url(img/pattern.png);
background-repeat: repeat;
background-color: rgba(44,62,80,0.4);
z-index: 2;
}

.jumbotron {

  background-image:url('main.jpg');
  height: 100%;
  font-family: 'Hammersmith One', sans-serif;
  text-transform: uppercase;
  letter-spacing: 6px;
  text-align: center;
}

.jumbotron .container {
  position: relative;
  top:120px;
}

.jumbotron h1, .jumbotron p, .jumbotron a, .jumbotron button, .jumbotron img
{
  position: relative;
  z-index: 3;
}

.jumbotron img
{
  margin-bottom: 5px;
  padding: 2px;
}

.jumbotron button
{
  margin-top: 18px; 
  width: 130px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  padding: 10px;
  font-weight: bold;

}

.jumbotron p {
  font-size: 12px;
  color: #e3e3e3;

}

.jumbotron a {
  font-size: 15px;
  color:#fff;
  text-decoration: none;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: 'Shift', sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}
Nakib
  • 4,593
  • 7
  • 23
  • 45

1 Answers1

0

I've ran into issues before with fixed navbars overlapping content, and the solution was to add padding to the fixed navbar body. Check out this answer: twitter bootstrap navbar fixed top overlapping site.

EDIT: I made a JSFiddle that replicates the problem - it looks like adding a padding-top to the body fixes the problem of the fixed navbar overlapping the body where content is rendered:

body {
    height: 100%;
    padding-bottom: 65px;
}
Community
  • 1
  • 1
alex
  • 6,818
  • 9
  • 52
  • 103
  • any other way....i tried this thing earlier but it doesn't seems to work the way i intended. – Nakib Aug 04 '14 at 21:24
  • You'd ought to post your code in the question - I'm not sure what the issue is if your fixed navbars have bottom padding without looking at it. – alex Aug 05 '14 at 12:45
  • I have added both css and html – Nakib Aug 05 '14 at 21:38