The active class in Bootstrap 4 Scroll Spy failed to update

My HTML code:

<body data-spy="scroll" data-target=".dmu-top-nav" data-offset="50">
  <header>
  <nav class="navbar navbar-toggleable-sm navbar-expand-md dmu-top-nav fixed-top" role="navigation">
  <div class="container-fluid">
  <div class="dmu-nav-wrapper">
  <div class="navbar-header">
    <a class="navbar-brand" href="#home">
    <img src="img/220px-Logo__lowres.png" width="30" height="30" alt="logo">
    </a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#dmu-nav-menu" aria-controls="dmu-nav-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    </button>
  </div>

In the previous HTML snippet, I have included a logo and an icon for the toggle button. I have also added classes for expand and fixed top, but it seems that it is not working as expected. Although my data-target is correctly set to .dmu-top-nav.

<div id="dmu-nav-menu" class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li class="nav-item active">
      <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="#news">Upcoming</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#staff">Lecture</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#student">Alumni</a>
    </li>
  </ul>
....
</header>
....

I am facing an issue where the active class is not changing. The second code block contains sections with href links for different pages.

htmlcssbootstrap-4

Answer №1

Hey there! If you're looking to customize the styling of your navigation bar, here is some CSS code that you can add to your stylesheet: 

.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}

.nav-scroller .nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.nav-scroller .nav-link {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: .875rem;
}

.card-img-right {
  height: 100%;
  border-radius: 0 3px 3px 0;
}

.flex-auto {
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.h-250 { height: 250px; }
@media (min-width: 768px) {
  .h-md-250 { height: 250px; }
}

For the HTML structure, you can use the following code:

<div class="nav-scroller py-1 mb-2">
    <nav class="nav d-flex justify-content-between">
      <a class="p-2 text-muted" href="#">World</a>
      <a class="p-2 text-muted" href="#">U.S.</a>
      <a class="p-2 text-muted" href="#">Technology</a>
      <a class="p-2 text-muted" href="#">Design</a>
      <a class="p-2 text-muted" href="#">Culture</a>
      <a class="p-2 text-muted" href="#">Business</a>
      <a class="p-2 text-muted" href="#">Politics</a>
      <a class="p-2 text-muted" href="#">Opinion</a>
      <a class="p-2 text-muted" href="#">Science</a>
      <a class="p-2 text-muted" href="#">Health</a>
      <a class="p-2 text-muted" href="#">Style</a>
      <a class="p-2 text-muted" href="#">Travel</a>
    </nav>
  </div>

Answer №2

Ah, now the solution makes sense to me! The active class is being modified within the 'a' element, although I'm not entirely sure why that is. It appears that the 'a' element both adds and removes the active class.

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

Chrome Flexbox Hacks: Controlling the Size of Nested Items

How can I ensure that an element nested within a flexbox member in Google Chrome is limited to the size of its container? For example, consider the following scenario: <div style="display:flex; flex-direction:column; height:100vh;"> <div style= ...

htmlcssgoogle-chromeflexbox

How can recursive data be displayed in a template?

I am working with a model in Django that has a ForeignKey pointing to itself, and I need to display all the data from the database using lists and sublists: Below is my model definition: class Place(models.Model) name = models.CharField(max_length=1 ...

pythonhtmlcssdjangodjango-models

What's causing my struggle to override the bootstrap nav-link class in next.js?

I am facing an issue where I need to customize the active state of bootstrap .nav-link in the code snippet below: <li className="nav-item"> <a className={`${styles.navLink} nav-link`} role="tab" data-to ...

csstwitter-bootstrapnext.js

Modify the font style of the jQuery autocomplete box to customize the text appearance

Hello, I'm a beginner with jquery and currently experimenting with the autocomplete feature. I managed to change the font of the dropdown list successfully but struggling to do the same for the input field itself. Does anyone know how to achieve this ...

javascriptjqueryhtmlcssfonts

Preventing a particular CSS file from being applied to my Angular component

Currently, my modal component is built using bootstrap, but we encountered an issue with our project's CSS file which also utilizes the same classes as bootstrap (.Modal, .Modal-header). This conflicting styling was causing problems for the design of ...

cssangularbootstrap-4bootstrap-modalangular12

The problem of undefined icons in Material UI's Stepper StepLabel

Having some trouble incorporating a custom Step Label Icon within the nodes of the Stepper Component provided by Material UI. I want to add an icon to each circle, similar to what is shown in this Material UI demo: https://i.sstatic.net/WLOcS.png However, ...

javascriptcssreactjsbootstrap-4material-ui

Running a Python Selenium script

I need some help executing this script using selenium. <div class="vbseo_liked"> <a href="http://www.jamiiforums.com/member.php?u=8355" rel="nofollow">Nyaralego</a> , <a href="http://www.jamiiforums.com/member.php?u=8870" rel="nofollo ...

javascriptpythonhtmlseleniumweb-scraping

What is preventing me from adding a margin to the div directly? Why must I apply a margin to the child in order to affect the div's margin

I've encountered a strange situation with 2 fixes that seem rather unusual to me. 1: By removing the #MARGIN-30 tag and deleting the #Nav-bar tag under margin-3, the issue resolves itself when I reapply those tags. 2: Another fix is achieved by addi ...

cssmargin

Is there a way to target a child element for hover effect in CSS without affecting the parent element?

Is it feasible to hover over a nested child element without activating a hover effect on the parent element? In the demonstration below, you'll notice that even when hovering over the child, the hover effect on the parent is still in place. I am int ...

htmlcsscss-selectorshover

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...

javascriptjqueryhtmlcsstwitter-bootstrap

Can you explain the significance of this HTML code?

While examining some source code, I came across the following: <div class="classname {height: 300px; width: 200px}"></div> I am aware that element styling can be done using the style="" attribute. Could you explain what this code snippet sig ...

javascripthtmlcss

What could be causing the uneven application of CSS padding when it is applied to a div that serves as the parent of an HTML form?

Padding has been added only to the top and bottom of a div. The padding attribute is displaying consistently for the form element, however, it is not behaving uniformly for the parent div of the form as illustrated in the image provided below. Output:- h ...

htmlcss

Centering an icon vertically and introducing animation upon hovering over an image

I'm having difficulty with vertically centering an icon that drops down on image hover, and I want to make its transition smoother. Currently, it's dropping down too abruptly and no matter what transition property I apply (ease, ease-out, etc.), ...

htmlcsspositioncss-transitions

Learning how to retrieve the ID and Title using Jquery

Hello, I'm having an issue with my UL and LI elements. They work fine with the click function, but I can't seem to get the title when trying to access it. Example: // Works fine, but can't access the title $("#list li").on('click&ap ...

javascriptjqueryhtml

Adding a translucent background image across the entire page in Angular: What's the best method?

I need the background image to extend across the entire page, including covering the Material Data Table. The background should be transparent so that the content of the table remains readable. What is the most effective method to achieve this? Here is th ...

htmlcssangularbackgroundbackground-image

What is the best way to shade the background when a hyperlink is pressed?

I am currently working on customizing the navigation bar for my website. My navbar consists of five elements, and I want to make an element appear darker when it is clicked. Here's what I have attempted so far: Utilizing jQuery to modify the ac ...

phpjqueryhtmlcssnavbar

Overlay text on top of image with fading transparency when hovering over it

Is there a way to make the transparent layer that appears when hovering over an image on a card only cover the image itself and not extend onto the footer of the card? Currently, the image on the card covers most of it, and I want the hover overlay to beh ...

htmlcssimage

Clicking on buttons in the header does not lead to the intended section when scrolling

I have just completed a website project for a Udemy course, following all the instructions provided. However, I am facing an issue with the functionality of two buttons on my site. I want these buttons to scroll to specific sections when clicked. The "I&ap ...

javascriptjqueryhtmlcssscroll

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

I am attempting to integrate d3-graphviz following the guidance provided here within an angular template, like in this example. The tutorial on the d3-graphviz website advises me to include the following code in the index.html file: <!DOCTYPE html> & ...

javascripthtmlangulard3.jsgraphviz

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs