Issue with Bootstrap navbar not highlighting section items when scrolled to

I have recently developed a webpage using html5, css3, and bootstrap. However, I am facing an issue with the navbar menu not highlighting the items that are pointing to specific sections on the page. I would like the navbar menu to automatically highlight the sections as I scroll down. Here is a snippet of the code:

section {
  width: 100vw;
  height: 60vh;
  padding: 50px;
}

.cl_white {
  color: white;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<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>John Doe | Portfolio</h1>
    <p class="lead">Welcome to my portfolio! Feel free to explore my work and don't hesitate to contact me for any projects or collaborations. I am here to provide professional services with a touch of creativity. Thank you for visiting!</p>
   </section>
   <section id = "work"></section>
   <section id = "contact"></section>
</body>
      
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

jqueryhtmlcssbootstrap-4

Answer №1

I implemented smooth behavior CSS for a seamless scroll experience and assigned a height of 100vh to the p tag for scroll spy view.

Here's how you can do it:

To achieve this effect, you need to include the following code in your body tag: 

data-spy="scroll" data-target="#navbarNav"
. Then, ensure that the data-target ID matches with the navbar-collapse and the button's data-target.

html{
  scroll-behavior: smooth;
}
p{
  height: 100vh;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<body data-spy="scroll" data-target="#navbarNav">
  <nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
    <div class="container">
      <a class="navbar-brand" href="#"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#project">Projects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>  
  </nav>
  <div>
    <h4 id="home">@fat</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi expedita non fuga sint, cumque, commodi, quia iure quidem dolore repudiandae aut ducimus, at impedit. Dolore tempore esse nisi placeat reprehenderit.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis velit perferendis neque, cupiditate tempora in, facere ad voluptate! Rerum incidunt provident totam voluptate molestiae dolore distinctio eaque officiis ex facilis.</p>
    <h4 id="about">@mdo</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum obcaecati ut pariatur corrupti, nisi iure tempora, consectetur impedit saepe. Distinctio soluta eos odio accusamus tempore iusto nam sunt, corporis quam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi itaque, voluptates possimus dolorem tempora ipsam eum consectetur natus in iste odio officiis, doloribus consequuntur accusantium aut illum dicta deleniti a!</p>
    <h4 id="project">one</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum sed debitis ab aspernatur itaque dignissimos ducimus quam, voluptate esse illum dolore vitae voluptatum nemo consequuntur earum molestiae. Natus, perferendis, quaerat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate eveniet minus facere repellendus quaerat cum maxime molestiae repudiandae soluta nobis eum, fugiat, dolores reiciendis aliquam molestias nostrum, asperiores optio sequi?</p>
    <h4 id="contact">two</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eaque repellat ex modi veritatis quas. Aperiam, maxime numquam sint provident vel fugit suscipit commodi pariatur perferendis quas ipsam! Unde, neque.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere illo commodi aut quae, hic porro. Consectetur voluptate, perspiciatis amet laborum tempora ab, provident ipsam, sequi labore sunt est molestiae libero.</p>
  </div>
</body>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trouble with table class functionality persists following insertion of SQL database

After successfully setting up the table layout and connecting it to a database, I encountered an issue with the class not working as expected. Despite being able to retrieve records and display them in the table, the desired layout was missing. <bo ...

phphtmlcsssqlclass

What is the best way to anchor the components to a specific location on the screen in ASP.NET?

Currently I am working on creating a registration page in asp.net. I have been using panels to group the components such as labels, dropdown lists, and text boxes. However, when I run the page, I noticed that the positions of these components keep changing ...

javascriptasp.nethtmlcss

How can a callback be properly passed in programming?

My coding approach is outlined below: var CustomLibrary = (function (window, $, undefined) { return { URI: 'http://testpage/API/', OnSuccess: function (data, status) { }, OnError: function (request, status, error) { } ...

javascriptjquerycallback

Optimizing HTML/CSS performance: Comparing flexbox and tables for handling extensive datasets

Creating a React table component with hundreds of lines and variable cell widths can be complex. Would it be better to implement this using flexbox or a traditional table structure in HTML/CSS? ...

javascripthtmlcssreactjs

Easy steps to transform a basic table into a DataTables plugin

var jsonData = '{"data":{"2G":[{"amount":"9","detail":"35 MB 2G Data , Post 35 MB you will be charged at 4p\/10kb","validity":"1 Day","talktime":"0"},{"amount":"16","detail":"90 MB 2G Data, Post 90 MB you will be charged at 4p\/10kb","validi ...

jquerydatatabledatatables

What could be causing the div class to move downward in the CSS code?

I have posted a question, but unfortunately, no one has answered it yet. Here is my code snippet: * { margin: 0; padding: 0; } body { width: 100%; font-family: 'Cabin', sans-serif; background-color: #333; } .firstnav { ...

htmlcss

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

javascriptjqueryhtmlcss

Issue with scrolling up on a responsive table when using Bootstrap-select

When I have a bootstrap-select inside a td of a table-responsive table, I encounter an issue. If I click on the select-picker, the dropdown menu is not completely visible as the visibility is limited by the table margin. To address this, I tried adding d ...

htmlcssbootstrap-4bootstrap-selectbootstrap-selectpicker

Website route organization tool

Seeking assistance with implementing a route planning feature on my website. The user should be presented with multiple route options upon entering their origin and destination. Take a look at this reference site for inspiration: Any help would be great ...

phphtmlcsswebhttps

Unable to send data to controller when clicking on checkbox in CodeIgniter

Learning about CI and facing an issue with the following code: The Controller displays country values dynamically from the database, and I want to pass a value to my controller when a specific checkbox is clicked. This is the code for my view: <?php ...

phpjqueryajaxcodeignitercodeigniter-2

What can I do to prevent Masonry from floating all of my grid items to the left?

Is there a way to center justify the masonry grid items? I have noticed that my Masonry layout is aligning all the grid items to the left or justifying them to the left side: <div class="wrap"> <div class="parent grid"> <div class=" ...

jqueryhtmlcssgridmasonry

Attempting to sort through an array by leveraging VueJS and displaying solely the outcomes

Within a JSON file, I have an array of cars containing information such as model, year, brand, image, and description. When the page is loaded, this array populates using a v-for directive. Now, I'm exploring ways to enable users to filter these cars ...

javascripthtmlarraysvue.js

JavaScript error - Property value is not valid

When I use IE 6/7/8, I encounter a JavaScript error message. The problematic line of code reads as follows: document.getElementById('all').style.backgroundColor = color; The specific error reported in IE 6/7/8 is as follows: Invalid property ...

javascripthtml

What is the best way to horizontally align a div within a parent div?

I'm having trouble centering the red div containing three child elements (h1, h3, and button) within a green container div using CSS. I initially attempted to center the red div vertically and horizontally on its own, but after some research, I learne ...

cssflexboxcentering

Craft a brief description for every individual component discovered

Is there a way to identify and shorten all elements containing a <tspan> tag to just ten characters each? For example: <tspan>Bla bla bla bla</tspan> <tspan>Bla bla bla bla</tspan> <tspan>Bla bla bla bla</tspan> ...

javascriptjquery

The data from my ajax code is not being successfully transmitted to the database

I'm having trouble using ajax to add data to the database. I'm not sure if the issue lies in the ajax code or the PHP code. Here is a snippet of my code: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></ ...

javascriptphphtmlajaxdatabase

Tips for creating a scrolling iFrame that moves with the background

I have recently created a website with a unique design feature. The background image acts as a border surrounding the main content, which is located within an iFrame. However, I've encountered an issue where scrolling the iFrame does not affect the ba ...

cssscrollbarhtml

What is the best way to vertically center a div that has a fixed position and a specific width in pixels

Is there a way to center a fixed position div with a specified width of 300px, rather than in percentage? <div class="mainCont"> <div class="childCont"> </div> The childCont div has a fixed position and width of 300px. How can I ensur ...

jqueryhtmlcss

A guide on identifying the data type of a value entered into an HTML table using JavaScript

Currently, I am tackling a contenteditable HTML table challenge. My goal is to enforce the insertion of only numeric values while alerting the user if they attempt to input strings or non-numeric characters. Can anyone provide guidance on how to achieve th ...

javascripthtmlhtml-tablecontenteditable

Updating the Position of an Element in ElectronJS (e.g. Button, Label, etc)

Is there a way to change the positioning of a button in a window using JavaScript and Electron? I am trying to create new input boxes next to existing ones, but they always appear below the last one created. Is it possible to specify x and y coordinates fo ...

javascripthtmlelectron