I have a navigation bar in the following page
https://stackblitz.com/edit/web-platform-bcjvzq?file=index.html
clicking to home or about buttons causes the full page the reload, first on top left string appears than the navigation page loads a second later. It is not smoothly transitioning. What is causing this
The problem you are having is that when navigating the page the whole HTML, CSS and JavaScript gets loaded. Then the browser can interpret the JavaScript inside your HTML, which is responsible for loading your navigation:
<script>
$(function () {
$("#nav-placeholder").load("navigation.html");
});
</script>
In order to fix this, you could load/change your content on click of the navigation. In your index.html you can specify a method for setting the content.
<div id="content"></div>
<script>
$("#content").load("index2.html"); //loading the initial content
function setBody(url){
$("#content").load(url);
}
</script>
And then in the navigation call make your list-items call this functions:
<li><a id="len1" class="hoverable" onclick="setBody('index2.html')">Home</a></li>
<li><a id="len2" class="hoverable" onclick="setBody('body2.html')">About</a></li>