Is there a way to showcase the current section title in a top navigation drop-down by utilizing scrollspy?

I am trying to implement a feature on my website where the section's name is displayed on the dropdown tab using bootstrap scrollspy. Currently, when I scroll, only "section" is visible (which I want to exclude). What I would like is for the current section to be shown in the dropdown bar even when it's not open. For example, when I reach "section 2" while scrolling, I want to see "section 2" displayed in the dropdown bar at the top. Initially, I want the bar to show "section 1."

Here is the code I have so far: https://codepen.io/alyssaalex/pen/rNNGrLy

If anyone can provide assistance with this issue, I would greatly appreciate it. Thank you!

htmlcssbootstrap-4scrollspy

Answer №1

To display the section name in a dropdown title, you should trigger an event on section change and then retrieve the section name.

Include this JavaScript code in your file:

$(".navbar").on("activate.bs.scrollspy", function(){
  $("#section_ddl").html('');
  var sections = new Array("Section 1", "Section 2");
  var x = $(".nav li.active > a").text();
  if(sections.indexOf(x) != -1){
    $("#section_ddl").html(x + '<span class="caret"></span>');
  }
  else {
    $("#section_ddl").html('Section <span class="caret"></span>');
  }
});

If you need to add or remove sections, simply update the sections array with the new section names.

Please note that section_ddl refers to the id of the dropdown element.

You can view a working example here

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

Get the value of a CSS property in Python by parsing the rendered HTML

Currently, I am using Selenium and PhantomJS in conjunction with Python for the purpose of crawling rendered web pages. While it is a straightforward process to identify the presence of specific words within the HTML content (e.g. if "example" in html...), ...

pythonhtmlcssseleniumphantomjs

What is the best way to align these JavaScripts side by side using div elements?

After searching many sources and attempting various methods, I am still struggling to position two lines of code side by side on my website. My attempted solution can be found at the bottom of the code. http://pastebin.com/mV1DUbg0 The code looked strang ...

htmlcss

dynamic resizing, uniform dimensions

Is it possible to use CSS to ensure that an image is 100% the width of a fluid div without distorting the square shape? The goal is to match the height to the width for a cohesive look. Currently, I am using the following code for fluid width: .img{ max ...

css

In IE8, displaying an element with jQuery does not cause the footer to be pushed down

I've tried various methods to solve this issue, but none have been successful so far. To better illustrate my problem, I have created a FIDDLE. When the button is clicked, a hidden element is displayed. However, it does not adjust the footer position ...

jqueryhtmlcssinternet-explorer-8

Double array summation function

It is necessary for me to calculate the total coursePrice from this JSON data source here using AngularJS (javascript). I need to calculate two sums: one for each school and another for all schools combined. I have already displayed all the data in a tabl ...

javascripthtmlangularjs

Firefox fails to apply styles to elements that are empty

Below is a snippet of code for a table with editable content: table { border-collapse: collapse; } th, td { border: 1px solid gray; padding: 3px 6px; } [contenteditable]:empty:not(:focus)::before { content: attr(data-placeholder); color: gr ...

cssfirefoxcontenteditable

Define CSS styles based on the content of a specific cell within a table

Is there a way to target a <td> in CSS based on its content value? <table> <tr> <td>Name</td> <td>John</td> <tr> </table> For instance, how can I apply the color:bl ...

javascriptjqueryhtmlcsshtml-table

How can I apply justify-content exclusively to the first row with Bootstrap 4?

I need a solution where the rows generated dynamically within a div are centered only if it is the first row. If there is only one row and the elements in that row do not fill up to the specified Bootstrap class properties col-xl-3 col-lg-4 col-md-6 col-sm ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Styling elements with CSS to create horizontal and vertical lines between them

Struggling to replicate the design elements from this image using CSS. Specifically, I need help creating a horizontal yellow line over the title "nossos numeros" and vertical blue lines between "Cursos", "Alunos", and "Aulas". I am working with Bootstrap ...

csstwitter-bootstrap-4

Redefining a path in JavaScript after the page has already loaded

I am currently facing an issue with my website, which is built in HTML. In the head tag, I have included a JavaScript file. The website consists of two pages, and the problem arises when the path defined in the JavaScript file works correctly on the first ...

javascripthtmljquery

Problem occurring with Bulma CDN version 0.8.0 failing to identify the spacing helper

Recently revisited an older project I had started some time ago using the Bulma framework. However, for some reason, the 0.8.0 CDN is not being imported or recognized correctly by the spacing classes. Here's the code snippet I had initially: <link ...

htmlcsscdnbulma

The sub-menu options are constantly shifting... How can I keep them in place?

Here we go again... I'm having trouble with my sub-menu elements moving when I hover over them. I've searched for a solution but haven't found anything helpful. The previous advice I received about matching padding and adding transparent bo ...

htmlcss

Execute PHP function by clicking on an HTML anchor tag

I'm curious - can a PHP function be triggered simply by clicking a link, or is it better to stick with the form submit method? If linking works, where should the reference point to? Check out this code snippet: <?php session_start(); func ...

phphtmlfunction

A guide on sending multiple input values using the same class name or id through ajax

My goal is to send multiple input values through AJAX to my PHP script. Everything works smoothly when I use getElementById. However, I have the functionality to add a child. The issue arises when it only retrieves values from the first child while iterati ...

javascriptphpjqueryajaxhtml

Adjusting the size of all elements on a webpage

Upon completing my project, I noticed that my localhost:3000 is zoomed in at 125%, causing it to appear less than ideal at 100% zoom. Is there a way to adjust the zoom/scale of my website to match how it appeared on my localhost environment? I came across ...

javascriptcssreactjszooming

Is there a bug causing this div to load inconsistently in Chrome?

Currently, I am using Chrome Version 33.0.1750.154 m on Windows 7 Professional 64 bit operating system A few years ago, I developed a WordPress plugin that displays a cached and stylized Google Calendar. The plugin works fine but could use some improvemen ...

jqueryhtmlcssgoogle-chromebrowser-bugs

Numerous occurrences of this accordion component within a single page

I have been experimenting with having multiple instances of this accordion on the same page. You can view the fiddle here The second accordion is essentially a duplicate of the first one with different heading text or content. Below is the code snippet. P ...

javascriptjqueryhtmlcss

jQuery not refreshing properly

I'm currently in the process of creating a script to switch the language on a website using PHP and Ajax/jQuery. I would like the page content to refresh without having to reload the entire page. So far, this is what I have come up with: $( "a[data-r ...

javascriptphpjqueryhtmlajax

Can someone please explain how to apply various fonts to the text in a `<p>` paragraph using CSS and HTML?

Take a look at this image Can you provide guidance on how to incorporate various fonts within a paragraph, like the example shown in the image above? I am experimenting with the "Creative Corner" section. ...

htmlcssfonts

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb