Is jQuery code necessary for implementing a border-bottom active state in Bootstrap 4 scrollSpy?

Struggling to incorporate Bootstrap 4 scrollSpy on my website with an active state featuring a red border-bottom effect upon scrolling and/or clicking.

This is the desired outcome when scrolling or clicking on a section:

https://i.sstatic.net/J1qJg.jpg

Check out my Codepen for reference.

Looking for a Bootstrap/CSS-only solution that displays a Border Bottom only in its active state during scrollSpy and/or onClick events?

Still new to Bootstrap 4, currently learning jQuery and/or JS. Seeking assistance in finding a solution using Bootstrap, CSS, or even a minimalistic approach involving just a few lines of jQuery. Thank you!

CSS:

    body {
  position: relative;
}

    .navbar-nav .nav-link {
    margin-right: 15px;
    margin-left: 15px;
}

.navbar-nav li a{color:#d3d3d3;}

.navbar-nav li a:hover {color:#333;}

.navbar-expand-sm .navbar-nav a:hover:before {
  border-bottom: 5px solid #fff; 
  bottom: -7px; width:auto;
  content: " ";
  left:18px;
  position: absolute;
  right:18px;
}

.navbar-expand-sm .navbar-nav .active a::after {
  border-bottom: 5px solid red;
  bottom: -7px; width:auto;
  content: " ";
  left:18px;
  position: absolute;
  right:18px;
}
.navbar-nav > li {
  float: left;
  position: relative;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

HTML:

<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="wrapper">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top"> 
  <a class="navbar-brand" href="index.html">
<img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">CMM
</a>

  <button class="navbar-toggler custom-toggler navbar-toggler-right" 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 ml-md-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#section1">Section 1</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">Section 2</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">Section 3</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">Link 1</a>
        <a class="dropdown-item" href="#section42">Link 2</a>
      </div>
    </li>
  </ul>
  </div>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 1</h1>

</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 2</h1>

</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 3</h1>

</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 1</h1>

</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>Section 4 Submenu 2</h1>

</div>
  </div>
</body>
jquerycssbootstrap-4scrollspy

Answer №1

You are on the right track, but you just need to make a small adjustment. The active class should be applied to the a tag instead of being nested within another selector. Simply change this:

.navbar-expand-sm .navbar-nav .active a::after

to this:

.navbar-expand-sm .navbar-nav  a.active::after


body {
  position: relative;
}

.navbar-nav .nav-link {
  margin-right: 15px;
  margin-left: 15px;
}

.navbar-nav li a {
  color: #d3d3d3;
}

.navbar-nav li a:hover {
  color: #333;
}

.navbar-expand-sm .navbar-nav a:hover:before {
  border-bottom: 5px solid #fff;
  bottom: -7px;
  width: auto;
  content: " ";
  left: 18px;
  position: absolute;
  right: 18px;
}

.navbar-expand-sm .navbar-nav a.active::after {
  border-bottom: 5px solid red;
  bottom: -7px;
  width: auto;
  content: " ";
  left: 18px;
  position: absolute;
  right: 18px;
}

.navbar-nav>li {
  float: left;
  position: relative;
}

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 0, 0, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <style>
    body {
      position: relative;
    }
  </style>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">
  <div class="wrapper">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
      <a class="navbar-brand" href="index.html">
        <img src="/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">CMM
      </a>

      <button class="navbar-toggler custom-toggler navbar-toggler-right" 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 ml-md-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#section1">Section 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section2">Section 2</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section3">Section 3</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        Section 4
      </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#section41">Link 1</a>
              <a class="dropdown-item" href="#section42">Link 2</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>

    <div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
      <h1>Section 1</h1>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
    </div>
    <div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
      <h1>Section 2</h1>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
    </div>
    <div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
      <h1>Section 3</h1>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
    </div>
    <div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
      <h1>Section 4 Submenu 1</h1>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
    </div>
    <div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
      <h1>Section 4 Submenu 2</h1>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
      <p>Try scrolling in this section and observe how the navigation bar reacts! Try scrolling in this section and observe how the navigation bar reacts!</p>
    </div>
  </div>
</body>

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

Struggling to figure out how to properly shuffle my deck of cards array in JavaScript. Can't seem to grasp how to pass the array correctly

Currently, I am engrossed in my personal project and watching tutorials just for the fun of it. My goal is to create a game for my school project which is inspired by a war card game that I used to play as a child - where the highest number wins. I have ...

javascripthtmlcss

Guide to setting the hiddenfield value within a listview using javascript or jquery

Here is the javascript code that I am using to retrieve the value from my textbox with autocompleteextender. <script type="text/javascript"> function txt_lect_in_AutoCompleteExtender_itemSelected(sender, e) { var hdEmpId = $get('& ...

javascriptjqueryasp.netajaxtelerik

Emphasize a passage by clicking on a different section of text

Seeking Assistance I am currently customizing this template which incorporates the MixItUp plugin. My query pertains to highlighting the "filter tab" upon clicking on the corresponding text when hovering over each image, a task I find challenging as a new ...

javascriptjqueryhtmlcss

Uploading Multiple Files with CarrierWave

I am encountering an issue with uploading multiple files using carrier wave. Despite adding an array of hash in permit({image: []}) under the floorplan controller, I can only upload a single file at a time. Here is the controller: class FloorplansControl ...

jqueryruby-on-railscarrierwave

"Effortlessly Enhance Your HTML with Auto-Complete CSS Classes in Sublime Text

Is there a way to enable CSS auto-complete for classes in Sublime Text 2? For instance, I have linked a CSS file in my HTML document link rel="stylesheet" href="css/style.css" In the CSS file, I have defined the following class: .container-primary { ...

htmlcsssublimetext2code-hinting

Tips for populating a dataTable with a strongly typed Razor View Page

I am facing an issue with populating a dataTable on a strongly typed Razor View Page. I need to populate it with the Model of the page, but I am unsure of how to achieve this. Below is the code snippet for the dataTable: $(document).ready(function () { ...

c#jquery.netrazordatatables

Clean Bootstrap 4 radio buttons featuring labels positioned on top and aligned in rows with their legends

Is it feasible to create a form that replicates the layout in the link using only Bootstrap 4, or do I need to incorporate CSS as well? Despite my search efforts, I have only found examples related to different elements. https://i.sstatic.net/4ZCFc.png Th ...

bootstrap-4radio-buttonalignment

Tips for positioning a DOM element in the top right corner

I have a piece of code that currently works, but I'm curious to find out if there is a better way to position a DOM element on the top right of a container. Here are the prerequisites: 1) The structure of the DOM cannot be altered. 2) The CSS cod ...

csscss-float

Using Rails 3 with jQuery Mobile for remote AJAX calls, processing data as HTML

I've been browsing through multiple discussions on this topic and even watched the Railscast about mobile detection (#199). My rails3 application utilizes jquery, ajax, and format.js successfully. Now, I'm attempting to expand its functionality t ...

jqueryajaxruby-on-rails-3mobile

Sneaky footer paired with a side panel

Trying to incorporate a sticky footer within the content area of a page that includes a full-height sidebar. Here is a preview of the page I'm currently working on: I have experience using in the past with success, utilizing methods involving percen ...

htmlcss

loading a codeigniter page via AJAX calls

Currently, I am delving into the realm of AJAX using jQuery. To kick things off, I decided to utilize a code snippet from w3school, which performed admirably. Afterwards, I proceeded to incorporate the code into a view page within the Codeigniter framewor ...

jqueryajaxcodeigniter

Switching from ISO-8859-1 to utf8 with jQuery or JavaScript

One of the APIs I am working with returns text using ISO-88951-1 encoding, causing words with Spanish accents like "obtendá" to be incorrectly displayed as "obtendrá". Is there a way to convert this text to UTF-8? I am looking for a JavaScript or jQ ...

javascriptjquerynode.jsutf-8character-encoding

Enhance Pagination Elements in WooCommerce by Adding Class Names

When trying to utilize Boostrap 4 classes with WooCommerce pagination, I encountered difficulty in adding custom class names. Upon inspecting the pagination.php file, I found the following code: $total = isset( $total ) ? $total : wc_get_loop_prop( &ap ...

phpwordpresstwitter-bootstrapwoocommercebootstrap-4

How can I make my sidebar as long as my content?

Check out my website at: I'm trying to make the sidebar on my site go all the way down to the footer, or be the same length as my content. I don't want to use JQuery or any other plugins for this. I believe it should be a simple CSS fix, but I&a ...

csshtmlsidebar

Error encountered: Unrecognized media in CSS validation and parsing issue

I've been having trouble validating my CSS and keep encountering error messages. Despite ensuring I have closing brackets, there are parse errors on line 39 and unrecognized media issues on lines 79 and 81. Additionally, lines 70 and 89 also trigger p ...

htmlcss

Incorporating a flexible header size and scrollable content: Tips for avoiding the need to scroll through the entire page to find

I am currently working on creating a unique page template that has certain requirements: The height of the header may vary The content and aside containers should be independently scrollable Anchor links should not disrupt the page layout To see what I h ...

javascripthtmlcss

How can I create a reverse animation using CSS?

Is there a way to reverse the animation of the circular notification in the code provided? I want the circle to move forward, covering up the info and fading out. I've tried switching the animation around but haven't had success. Any suggestions? ...

javascripthtmlcsscss-animations

How can you execute/ajaxComplete in your code?

Is there a way to initiate a function once an AJAX response is finished? When the dropdown changes, the manageImagesDynamicObjectDetails function is invoked: <select id="imageComponentSelection" name="imageComponentSelection" onchange="manageImagesDyn ...

javascriptjqueryajax

"Have you ever noticed that the countdown date and time on your computer references the time from your personal device rather than the server

When using this code for a countdown date time, the timer references the time from the user's PC rather than the server. How can this be changed? Currently, when I change the date time on my PC, the countdown timer also changes accordingly (since it ...

phpjquerydatetimecountdown

Parameter name used for jQuery input

Is it possible to include the agru variable inside the function $('input[name=agru]')? function changeBackground(agru){ $('input[name=agru]').css('background','red'); } It seems that using $('input[nam ...

javascriptjquery