Bootstrap nav random highlighting (active?) when moving from .html to .aspx - html

Question

I have a Bootstrap template that came in an index.html file. I need to add some c# code, so I moved it over to an Default.aspx page.
Everything works, but the page loads with a seemingly random nav item highlighted(Is this active). The page loads with the Contact nav item highlighted. I tried setting the active class to the Home item.
<!-- Navigation -->
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">Home</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="hidden">
</li>
<li class="page-scroll active">
<a data-toggle="tab" href="#page-top">Home</a>
</li>
<li class="page-scroll">
<a data-toggle="tab" href="#portfolio">Demo's</a>
</li>
<li class="page-scroll">
<a data-toggle="tab" href="#screens">Screen Shots</a>
</li>
<li class="page-scroll">
<a data-toggle="tab" href="#new">New Things</a>
</li>
<li class="page-scroll">
<a data-toggle="tab" href="#about">About</a>
</li>
<li class="page-scroll">
<a data-toggle="tab" href="#contact">Contact</a>
</li>
<li class="page-scroll">
Resume
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>

Answer 1

The highlighting is not random, but rather coming from the .active class. If your above example, Home will be highlighted. Whichever nav element has the 'active' class will be the one that is highlighted. I've created an example showcasing this by changing Screen shots to active here.
If you want the Contact page to be highlighted, you need to set that tab as active:
<li class="page-scroll active">
<a data-toggle="tab" href="#contact">Contact</a>
</li>
For changing between multiple pages, you'll want to output this active class manually through your back-end code. There's already a great answer on how to do that in C# here.
Hope this helps! :)