I have created an html page using html5, css3 and bootstrap. Issue is that the navbar menu is not highlighting/selecting the items that are pointing to sections. I want that when I scroll down to other sections, the navbar should automatically highlight them in its menu. Here is snippet:
<html>
<head>
<title>Portfolio Website</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<style>
section {
width: 100vw;
height: 60vh;
padding: 50px;
}
.cl_white {
color: white;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar">
<nav class = "navbar navbar-inverse navbar-fixed-bottom">
<ul class = "nav navbar-nav">
<li><a href="#home">Home</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
<section id = "home" style="background: url(header.jpg); background-size=100% 100%;" class = "text-center cl_white">
<h1>Zeshan Sajid | Portfolio</h1>
<p class="lead">Hey Welcome there! Let just read myselft and then contact me for your projects and tasks that you want me to finish on the basis of professinality and perfection with the blend of magical skills. You are always welcome to contact me and ask your queries, as I am available to help you all the time in this regard. Thanks. </p>
</section>
<section id = "work"></section>
<section id = "contact"></section>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire