Bootstrap Scrolling Nav: fix sections height and active menu highlight - html

Question

when you click the <a> link in the navigation the anchor point looks like wrong, because you can't see the section headline. <h2> in my case.
Is possible to highlight the <a> link? Something like a border or smething like this...
This is the HTML code:
<!-- Fixed navbar -->
<nav id="navbar" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="page-scroll">Home</li>
<li><a class="page-scroll" href="#ark">Architektur</a></li>
<li><a class="page-scroll" href="#">Wohnen</a></li>
<li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
<li><a class="page-scroll" href="#lage">Lage</a></li>
<li><a class="page-scroll" href="#">Galerie</a></li>
<li><a class="page-scroll" href="#kontakt">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- === END NAV === -->
EDIT:
Nav Problem

Answer 1

I don't know exactly what do you mean in your first problem but with highlighting the <a></a> here is the code:
HTML
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Clients</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
li{
padding: 8px;
}
a{
text-decoration: none;
color: #000;
}
a:hover, a:focus{
color: red;
text-decoration: none;
outline: none;
}
.active{
font-size: 30px;
color: red;
border-bottom: 5px solid red;
}
jQuery
$(document).ready(function(){
$('a').click(function(){
$('a').removeClass("active");
$(this).addClass("active");
});
});
Working fiddle:
JSFiddle

Answer 2

The fixed navbar overlaps your heading, that is the reason you say it's not displayed correctly - to fix this you can add some additional 50px or so when you calculate the top position of the anchor point
You need to create a class named "active" or "selected" which will contain desired styles like:
selected{
background-color: silver;
color: #fff;
}
var links = $(".page-scroll");
links.on('click',function(){
links.removeClass("selected");
$(this).addClass("selected");
});
li{
list-style-type: none;
}
.page-scroll{
float:left;
padding:15px;
text-align: center;
background-color: black;
color: #fff;
}
.selected{
background-color: silver;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navbar" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#">Home</a></li>
<li><a class="page-scroll" href="#ark">Architektur</a></li>
<li><a class="page-scroll selected" href="#">Wohnen</a></li>
<li><a class="page-scroll" href="#ausstattung">Ausstattung</a></li>
<li><a class="page-scroll" href="#lage">Lage</a></li>
<li><a class="page-scroll" href="#">Galerie</a></li>
<li><a class="page-scroll" href="#kontakt">Kontakt</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
Then you need to add this class when the anchor from navbar is clicked

Answer 3

For problem number 1, solution is - add this to your CSS file (3 first lines can be taken out as they are just my comments):
/* FIXES problem:
Navbar hides initial content when jumping to in-page anchor #1768
https://github.com/twbs/bootstrap/issues/1768 */
*[id]:before {
display: block;
content: " ";
margin-top: -75px;
height: 75px;
visibility: hidden;
}