Bootstrap one page website themev formatting problems - html

Question

My website: zarwanhashem.com
I'm using the landing-page theme and the scrolling-nav css, which can be found here:
http://startbootstrap.com/template-overviews/landing-page/
http://startbootstrap.com/template-overviews/scrolling-nav/
2 problems:
When I navigate to different pages using the navbar the next "page" creeps up from the bottom because the page I actually navigated to doesn't fill up the entire screen. How can make it so that the extra space is just filled in with the background colour?
When I navigate to different sections the scrolling stops too late. As in, the spacing between the images and the navbar is non-existent. There should be 50px padding there to make a space equal to the size of the navbar. I tried adding padding to the divs but the padding goes into the previous section, which has a different background colour, so it doesn't fit in properly.
Also, a random bug, but there's an equal sign between two of the sections and I can't find out why.
I would appreciate any help.
Here's some of my code. All of it is public on the website so it's visible if you want to look at it. I took away the 50px padding now because of the colour issue.
Code for the robot section (The other project sections have the same structure):
<div id="robotAI" class="content-section-b">
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">Fighter Robot AI</h2>
<p class="lead">An object oriented robot programmed in Java. It fought robots
created by other students in an environment created by a third party. I also created other robots
and tested them against each other to determine the best strategy. A brief report summarizing how the robot's intelligence
works can be found here.</p>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/robotAI.png" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
Code for the about section (The resume section has almost the same structure):
<div id="about" class="content-section-a">
<div class="container">
<div class="row">
<h2 class="section-heading" style="text-align:center">About Me</h2>
<p class="lead">I'm a passionate student who loves coding. In high school I took 3 computer science
courses, which introduced me to the world of programming. I try to make free time
in my schedule for coding so that I can fiddle around with different languages and problems. I've worked with Turing, Python, and Java. I also have a basic understanding
of HTML and CSS.
<br><br>
My other interests include martial arts and chocolate. I trained in mixed martial arts for 10 years, and currently
hold a 2nd degree black belt. The focus of my training was karate, but I also worked with tae kwon do and jujutsu.
<br><br>
I am currently seeking a software development internship/co-op position from May-August 2015. You can find more information
about me on my LinkedIn page.</p>
</div>
</div>
<!-- /.container -->
</div>
These are the only changes I've made to landing-page css (Not sure if these actually are changes, I might've reverted them back to what they were originally):
.content-section-a {
background-color: #f8f8f8;
}
.content-section-b {
border-top: 1px solid #e7e7e7;
border-bottom: 1px solid #e7e7e7;
}
Navigation bar code:
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<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 page-scroll" href="#page-top">Zarwan Hashem</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>About Me</li>
<li class="dropdown">
Projects <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a class = "page-scroll" href="#robotAI">Fighter Robot AI</a></li>
<li><a class = "page-scroll" href="#spaceInvaders">Space Invaders</a></li>
<li><a class = "page-scroll" href="#snake">Snake</a></li>
</ul>
</li>
<li>
<a class="page-scroll" href="#resume">Resume</a>
</li>
</ul>
<a class="navbar-brand pull-right">zarwan#zarwanhashem.com</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
Note that I'm not actually using the sections in the scrolling-nav code. I'm only using the navbar section. Also I'm very new to CSS and HTML so please dumb down your explanations a little.

Answer 1

if you want to make each section fill up the whole space you will have a problem that each user have different screen height, I don't know if there is a way to do it with css but I have this solution using jQuery:
<script type="text/javascript">
$(window).ready(function(){
$('div[class^="content-section"]').css('min-height', $(window).height());
})
</script>
if you already have jQuery just add this script to the bottom of the body.
as for the second problem you that's because your navigation bar is set to fixed, and the javascript handling the scrolling put the div at the top of the window, to fix that you either have to change the javascript handling the scrolling or just increase the padding-top for each section.
edit: to fix the scrolling problem you can edit the file scrolling-nav.js and change the click event handler by subtracting 50 form the offset().top:
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 50
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});