I am running into a problem and I’m not sure to resolve it. I have a bootstrap 4 navbar with scrollspy enabled so that the nav bar updates when you scroll through the different sections of the page.
I also have a jquery function that does smooth scrolling so that the page does not immediately jump when you click on a navigation link. I have two problems
My website: https://codepen.io/tidus198/pen/deWpvX 3
Problem is the nav bar scrollspy. The page by default does not make my first nav item active. The About nav item is not highlighted when you first visit the page or if you scroll all the way to the top of the page. If you scroll down a little bit, the About link becomes active in the nav bar. This is occurring because I made my navbar fixed so it scrolls along with the page. How do I get it to work so that the first nav item is active by default?
If you click on one of the nav items, it scrolls past the title of the section (i.e. shows content instead of heading). I fixed this by using the jquery offset function (getting the top value and subtracting it by a set amount) to display the actual heading instead of the content right away. So now, when you click on for example Contact, it actually scrolls to the Contact text. But the issue is if you click on Contact, the navbar displays Portfolio as the active item. How would I go about fixing this? The offset works but broke the navigation item.
Any help would be 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">
<!-- Latest compiled and minified CSS -->
<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="[email protected]" 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:[email protected]?subject=Porfolio Question">
[email protected]</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);
});
});
