I have encountered an issue that I need help resolving. My Bootstrap 4 navbar has scrollspy enabled to update as you navigate through the page's sections, and a jQuery function provides smooth scrolling when clicking on navigation links. However, I am facing two problems.
Here is a link to my website: https://codepen.io/tidus198/pen/deWpvX
The first problem is related to the nav bar scrollspy - the default setting does not make the first nav item active. The 'About' section in the navbar is not highlighted when visiting the page or if scrolled to the top. It only becomes active once scrolled down slightly due to the fixed navbar scrolling with the page. How can I ensure the first nav item is active by default?
The second issue occurs when clicking on a nav item; it scrolls past the section title to show content instead of the heading. I managed to fix this using the jQuery offset function to set the correct display. However, now when clicking on 'Contact', the navbar highlights 'Portfolio'. How can I resolve this conflict between the offset correction and the navigation items?
Any assistance would be greatly appreciated.
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>My Portfolio</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body id = "body">
<header id="test">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" >
<a class="navbar-brand" href="#"><img id="navpic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" ></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav nav-pills ml-auto" id="homenav">
<li class="nav-item">
<a class="nav-link" href="#test">About <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<section class="container">
<div class="jumbotron text-center">
<div class="row">
<div class="col-12 col-md-4">
<img id="mypic" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Profile Picture" class="img-thumbnail">
</div>
<div class="col-12 col-md-8">
<h1 class="display-5">Your Name Here</h1>
<p class="lead">Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and
creative direction; devoted to functional programming and information architecture.</p>
<hr class="my-4">
<p class="small">Web Developer - User Experience Designer - Graphic Artist</p>
</div>
</div>
</div>
</section>
</header>
<main>
<section id="content-container" class="container">
<div class="row" id="portfolio">
<div class="col-12">
<h2 class="display-5 text-center text-white text-uppercase mb-3">Portfolio</h2>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image One
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Two</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image Three
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Four</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">
Image Five
</div>
</div>
</div>
<div class="col-lg-6 d-flex align-items-stretch mb-4">
<div class="card w-100">
<img class="card-img-top" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="Card image cap">
<div class="card-footer text-center">Image Six</div>
</div>
</div>
</div>
</section>
</main>
<footer>
<section class="container">
<div class="jumbotron mt-2">
<div class="row">
<div class="col-12">
<h2 class="display-4 text-center pb-2" id="contact">Contact Me</h2>
</div>
</div>
<div class="row">
<div class="col-12 col-md-8">
<form>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required>
</div>
<div class="form-group">
<label for="emailaddr">Email</label>
<input type="email" class="form-control" id="emailaddr" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="701e111d15301508111d001c155e131f1d">[email protected]</a>" required>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="number" class="form-control" id="phone" placeholder="123-456-7890">
</div>
<div class="form-group">
<label for="textarea">Message</label>
<textarea class="form-control" id="textarea" rows="3"></textarea>
</div>
</form>
</div>
<div class="col-12 col-md-4">
<p class="lead">Feel free to contact me if you have any additional questions on my portfolio. You can either email me directly
at
<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45283c2028242c2905283c2028242c296b262a28">[email protected]</a>?subject=Porfolio Question">
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0a67736f676b63664a67736f676b636624696567">[email protected]</a></a> or fill out the contact form.
</p>
</div>
</div>
</div>
</section>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
CSS:
blockquote {
border-left: none;
}
#body {
background-color: #464646;
padding-top: 65px;
position: relative;
}
#mypic {
width: 200px;
height: 200px;
border-radius: 50%;
}
#navpic {
width: 40px;
height: 40px;
}
.jumbotron #contact {
margin-top: -50px;
}
form label {
font-weight: bold;
}
#homenav > li > a:hover{
background-color:grey;
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
}
#about{
position: relative;
top: 1px;
}
JS:
$(document).ready(function (){
$('body').scrollspy({ target: '.navbar' });
$('.nav-link').on('click', function(){
var clickedItem = $(this).attr('href');
$('html, body').animate({
scrollTop: $(clickedItem).offset().top - 80
}, 1500);
});
});