Converting static website to wordpress issues with menus - php

Question

Hello I have a static website for a company made with bootstrap, html and css. I want to make the same website in wordpress. I have started learning wordpress today.
I have followed different tutorials to made my template for wordpress, I have managed to create the first index.php and it is working nicely. I have created about page too and it is also working good. But what i want now, I have menu in my header php, How to i add link to my wordpress pages?
This is my header-top.php im calling this in header.php, The menu is showing properly
<!-- HEADER TOP MENU-->navbar navbar-inverse navbar-fixed-top navbar-expanded">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" aria-expanded="false">
<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="index.html">
<img src="<?php bloginfo('template_directory')?>/images/jms_logo.png" class="img-responsive" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
</div>
Then i went to wp-admin and create a about page and added textual content to it and it is showing properly on this link http://localhost/wordpress/about/
Now my question is
Q1. How do i add this link of about page in my header-top menu page.
<li>Home</li>
<li>About Us</li>
<li>License</li>
Im totally new to wp so i'm not sure whatever i have done is the correct way of doing it or not? can u also suggest me some proper tutorials that i can understand easily to create my website.
UPDATED MENU
I have replaced this
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
with this but now the css for my menu is gone.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<?php wp_nav_menu( array( 'theme_location' => 'header-top' ) ); ?>
</div>
In my static website
In my WP
Updated 2 After inspecting elements, It is showing like this
but i want like this

Answer 1

For menus you should use standart wp_nav_menu function. It generates menu itself. So you should use something like this:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<?php if ( has_nav_menu( 'primary-menu' ) ) { wp_nav_menu( array( 'menu_class' => 'nav navbar-nav navbar-right TopNav', 'theme_location' => 'primary-menu' ) );} ?>
</div>
Instead of:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
<li>Home</li>
<li>About Us</li>
<li>License</li>
<li>Gallery</li>
<li>Trainings</li>
<li>Contact Us</li>
</ul>
</div>
And when you add wp_nav_menu to your theme then option MENU should appear in Appeareance section on WP admin, where you can create new menu and assign it to primary-menu position in theme
UPDATE
You can generate only li items by using this method:
$options = array(
'echo' => false
,'container' => false
);
$menu = wp_nav_menu($options);
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
So you can try something like this:
$options = array(
'echo' => false
,'container' => false
);
$menu = wp_nav_menu($options);
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav navbar-right TopNav">
echo preg_replace( array( '#^<ul [^>]*>#', '#</ul>$#' ), '', $menu );
</ul>
</div>