Bootstrap navbar active class issue & block background color in grid

Hello everyone

So I’ve been doing the portfolio project all day long and came up with 2 problems which I couldn’t resolve myself. Please help if you can.

Problem.1-1
Bootstrap navbar active class issue

I created a fixed to top navbar and used active class on the first list element only. But even when I scroll down, I don’t see the highlighted section moving to the next.

<nav class="navbar navbar-default navbar-fixed-top">
	<div class="container-fluid">
		<!-- logo -->
			<div class="navbar-header dkhj">
				<a href="#" class="navbar-brand"></a><h1 class="dkhj-padding">DKHJ</h1></a>
			</div>

		<!-- menu items -->
			<ul class="nav navbar-nav menuitems navbar-right">
				<li class="active"><a href="#about">About Daniel</a></li>
				<li><a href="#portfolio">Portfolio</a></li>
				<li><a href="#contact">Contact</a></li>
			</ul>

	</div>
</nav>

Problem 1-2
So I’ve linked the sections in the page using bookmark(#) with the navbar. But when I click on the menu from the navbar, it brings me to the middle of the div I want to see. I think it might be because fixed to top navbar takes around 70px from the top? Is there any way to get around this problem?

Problem 2
And for the portfolio part, I’ve used 4 rows and 3 columns grid and put blocks in the each grid. (Used first row to put photos, second row for descriptions. Then a line break. Then repeated above. i.e. - 6 websites altogether = (3 websites per 2 rows.) * 2) I’ve given background color to each columns(class=“img-pf”) and used responsive image in each images. Images have responded well to fit in the each div with full width. But because their width to height ratio is different, I have some spaces that shows the background color of layer below.

At first, I had given the background color to each row to fill up the space. But then I realised that images are not vertically in the middle neither… So it would be highly appreciated if anyone can help me out with 1) how to put images vertically in the middle of each grid and then to fill up the whole grid with the background color even if there isn’t any element filling it up.

Below is my code of the portfolio part and link to the codepen for you to see how it gets rendered on the browser.

<div class="body container-fluid" id="portfolio"><br>
	<!-- 1st row: portfolio images -->
	<div class="row portfolio block">
		<div class="col-sm-4 img-pf">
			<img src="https://cdn-images-1.medium.com/max/1600/1*GoMSneKoUrIw0aGydsw9dg.png" class="img-responsive" alt="Website_1">
		</div>
		<div class="col-sm-4 img-pf">
			<img src="http://ibrandstudio.com/wp-content/forum/uploads/2013/06/responsive-portfolio-websites-Michela-Chiucini-web-design.jpg" class="img-responsive" alt="Website_2">
		</div>
		<div class="col-sm-4 img-pf">
			<img src="https://cdn-images-1.medium.com/max/1600/1*SEObQ-TDZTtnO9iNrBROrw.png" class="img-responsive" alt="Website_2">
		</div>
	</div>

	<!-- description of above images -->
       <div class="row portfolio block">
		<div class="col-sm-4 desc-pf">
			<p>Lorem ipsum dolor sit amet, nemo nunc, ligula viverra justo risus justo, egestas adipiscing arcu eget libero dolor, consequat nam pellentesque lorem ipsum, ante aliqua sed fames</p>
		</div>
		<div class="col-sm-4 desc-pf">
			<p>Lorem ipsum dolor sit amet, nemo nunc, ligula viverra justo risus justo, egestas adipiscing arcu eget libero dolor, consequat nam pellentesque lorem ipsum, ante aliqua sed fames</p>
		</div>
		<div class="col-sm-4 desc-pf">
			<p>Lorem ipsum dolor sit amet, nemo nunc, ligula viverra justo risus justo, egestas adipiscing arcu eget libero dolor, consequat nam pellentesque lorem ipsum, ante aliqua sed fames</p>
		</div>
	</div>
	<br>
	<!-- 2nd row: portfolio images -->
        <div class="row portfolio block">
		<div class="col-sm-4 img-pf">
			<img src="http://octagonsolutions.net/wp-content/forum/uploads/2015/06/Screen-Shot-2015-06-24-at-12.28.31-PM-1024x523-400x230.png" class="img-responsive" alt="Website_4">
		</div>
		<div class="col-sm-4 img-pf">
			<img src="https://www.actonweb.com/wp-content/forum/uploads/2017/09/work-cregg.png" class="img-responsive" alt="Website_5">
		</div>
		<div class="col-sm-4 img-pf">
			<img src="http://maxcdn.webappers.com/img/2011/03/9.png" class="img-responsive" alt="Website_6">
		</div>
	</div>
	<!-- description of above images -->
	<div class="row portfolio block">
		<div class="col-sm-4 desc-pf">
			<p>Lorem ipsum dolor sit amet, nemo nunc, ligula viverra justo risus justo, egestas adipiscing arcu eget libero dolor, consequat nam pellentesque lorem ipsum, ante aliqua sed fames</p>
		</div>
			<div class="col-sm-4 desc-pf">
				<p>Lorem ipsum dolor sit amet, nemo nunc, ligula viverra justo risus justo, egestas adipiscing arcu eget libero dolor, consequat nam pellentesque lorem ipsum, ante aliqua sed fames</p>
			</div>
			<div class="col-sm-4 desc-pf">
				<p>Lorem ipsum dolor sit amet, nemo nunc, ligula viverra justo risus justo, egestas adipiscing arcu eget libero dolor, consequat nam pellentesque lorem ipsum, ante aliqua sed fames</p>
			</div>
		</div>
                <br>
	</div>

For the scroll, you’ll need to add the scrollspy at the very top of your code, before anything else:

<body data-spy="scroll" data-target=".navbar" data-offset="50">

1 Like

For Problem 1-2, if your navbar takes up 70px, you could add 70 pixels (or so) of margin and/or padding to the very first row under your navbar. I added a CSS class:

.top-row {
  margin-top: 50px;
  padding: 50px;
}

For problem 2, try adding a CSS class to make your thumbnails work the way you want them to:

.img-thumbnail{
  margin: auto;
  width: 700px;
}

Your background question can be fixed the same way: create a CSS class with the background-color property and assign that class to entire row(s) your grid is/are in.