The navigation bar components created with Bootstrap are experiencing issues with their active state functionality

I created a Navbar using Bootstrap code but I am facing an issue where the 'active' state is not being applied to the Navbar elements on my webpage.

I have been attempting to add and remove the active class on the Navbar elements, but I have been unable to solve the aforementioned problem. Can someone please assist me?

.navbar {
  position: fixed;
  top: 0px;
  width: 100%;
}

.nav-menu {
  padding: 0;
  background-color: #000000;
  opacity: 0.85;
  height: 60px;
}

.nav-menu ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.nav-menu a {
  display: block;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin: 0 0px;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #FFFFFF;
  transition: 0.9s;
  box-sizing: border-box;
}

.nav-menu a:hover:after {
  transform: translateX(-50%) scaleX(1);
}

.nav-menu a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  width: 100%;
  height: 2px;
  background-color: #C72C41;
  transition: transform 250ms;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation"></div>
<nav class="navbar navbar fixed-top navbar-expand-sm nav-menu" id="nav">
  <div class="container">
    <a href="#" class="navbar-brand">\harsh_sharma/</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarid">
    
                    <span id="tc"><i class="fas fa-bars"></i></span>
                </button>
    <div class="collapse navbar-collapse" id="navbarid">
      <ul class="nav navbar-nav text-center ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#header">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="#experience">Experience</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>


      </ul>
    </div>
  </div>
</nav>

htmlcssbootstrap-4navbar

Answer №1

Dealing with a similar dilemma recently, I discovered that certain newer versions of bootstrap don't support the active class for elements within the base .nav class. This issue can be found here: [https://getbootstrap.com/docs/4.5/components/navs/#base-nav] The workaround involves defining the active class in the stylesheet yourself. This active class is then applied to the link, giving it a class of "nav-link active". If you directly apply your .active class to the list after defining it in the stylesheet, the nav-link styling will take precedence due to specificity. You can learn more about this here: [https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity]. I have made the necessary edits to your code, and now the home element is active. Thank you!

.navbar {
  position: fixed;
  top: 0px;
  width: 100%;
}

.nav-menu {
  padding: 0;
  background-color: #000000;
  opacity: 0.85;
  height: 60px;
}

.nav-menu ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.nav-menu a {
  display: block;
  position: relative;
  font-size: 16px;
  font-weight: 400;
  font-family: "Poppins", sans-serif;
  margin: 0 0px;
  text-decoration: none;
}

.nav-menu a:hover {
  color: #FFFFFF;
  transition: 0.9s;
  box-sizing: border-box;
}

.nav-menu a:hover:after {
  transform: translateX(-50%) scaleX(1);
}

.nav-menu a:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scaleX(0);
  transform-origin: 50% 50%;
  width: 100%;
  height: 2px;
  background-color: #C72C41;
  transition: transform 250ms;
}
.active {
   color:#FFFFFF;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-inverse navbar-fixed-top navbar-fixed-width" role="navigation"></div>
<nav class="navbar navbar fixed-top navbar-expand-sm nav-menu" id="nav">
  <div class="container">
    <a href="#" class="navbar-brand">\harsh_sharma/</a>
    <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarid">
    
                    <span id="tc"><i class="fas fa-bars"></i></span>
                </button>
    <div class="collapse navbar-collapse" id="navbarid">
      <ul class="nav navbar-nav text-center ml-auto">
        <li class="nav-item"><a class="nav-link active" href="#header">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="#experience">Experience</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
        <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>


      </ul>
    </div>
  </div>
</nav>

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

Change the marquee scrolling back to its original starting point

I am trying to implement a continuous image scroll (marquee) in HTML. My goal is to have the marquee stop scrolling when the mouse hovers over it, with the images returning to their initial position. Once the mouse moves away, I want the marquee to resume ...

jqueryhtmlcssimagemarquee

There are times when window.onload doesn't do the trick, but using alert() can make

I recently posted a question related to this, so I apologize for reaching out again. I am struggling to grasp this concept as I am still in the process of learning JavaScript/HTML. Currently, I am loading an SVG into my HTML using SVGInject and implementi ...

javascripthtmlhttpsvgonload

Implementing Ng-debounce selectively for functions within an AngularJS application

I am looking to execute specific functions at different time intervals when there is a change in input. The current setup is as follows: <input type="text" name="title" ng-model="title" placeholder="Search..." ng-model-options="{ updateOn: 'defaul ...

javascripthtmlangularjs

The spacing in the Superfish menu is not aligned correctly

I am encountering a spacing issue with a superfish drop down menu. The problem can be observed here: To view the issue in action, visit this link: Essentially, all of the submenu items are floated left with a 50% width. I am looking for a solution to rem ...

htmlcsswordpress

The color "clear" is not functioning as intended

Having an issue with Internet Explorer (typical, right?): The problem arises when I try to generate content with CSS that includes a background-image. Here's what it looks like: #nav ul li:after { content: "--"; position: relative; z-ind ...

cssinternet-explorercss-content

Having trouble locating a method in $scope following angular $compile

Apologies for the simple question, I am a beginner in AngularJS and front-end development. I am attempting to create a modal using bootbox as shown below: In Service: function _modalData(){ let element = "<div onclick=\"saveSelecti ...

javascriptjqueryhtmlangularjs

Using Javascript to swap background images, ensuring that the initial image is shown only once

I have a query regarding the background image rotation on my HTML page. I am currently using the code below to change the background image, but I want the first image to be displayed only once while the rest continue rotating. Can anyone provide guidance o ...

javascriptjqueryhtml

Only displaying sub items upon clicking the parent item in VueJS

I'm in the process of designing a navigation sidebar with main items and corresponding sub-items. I want the sub-item to be visible only when its parent item is clicked, and when a sub-item is clicked, I aim for it to stand out with a different color. ...

javascripthtmlcssvue.jsvuejs2

Angular fails to function properly post rendering the body using ajax

I recently created a HTML page using AJAX, and here is the code snippet: <div class="contents" id="subContents" ng-app=""> @RenderBody() @RenderSection("scripts", required: false) </div> <script src="http://ajax.googleapis.com/ajax/ ...

javascripthtmlangularjs

Changing the background color of the dropdown button in Vue Bootstrap: A step-by-step guide

I've been struggling to modify the background color of a dropdown button, but no method seems to work. I've attempted changing it by using ID, removing its class and applying a new one, and even using !important to override the styles, but the ba ...

javascriptcssvue.jsnuxt.jsbootstrap-vue

Determining the Last Modified Date for a Sitemap using Javascript

I am trying to replicate the date format shown within <lastmod></lastmod> tags in a sitemap.xml file. How can I do this? The desired output is as follows: <lastmod>2016-01-21EEST18:01:18+03:00</lastmod> It appears that 'EEST ...

javascriptphphtmlxmlsitemap

Enhancing Next.js with custom CSS for React-Bootstrap components: A step-by-step guide

After installing the react-bootstrap module using the pm command and importing it into my _app.js file, I encountered an issue when trying to modify the Bootstrap code for my navbar component. The code snippet provided below showcases the navbar component: ...

cssreactjsnext.jsreact-bootstrap

jQuery: Remove the class if it exists, and then assign it to a different element. The power of jQuery

Currently, I am working on a video section that is designed in an accordion style. My main goal right now is to check if a class exists when a user clicks on a specific element. The requirement for this project is to allow only one section to be open at a ...

javascriptjqueryhtmlcss

How to Align Items in Bootstrap 5 Navbar

<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <%= link_to "My Ozone", root_path, class: "navbar-brand" %> <button class="navbar-toggler" type="button" data-toggle="colla ...

ruby-on-railsformsnavbarbootstrap-5

Showing text instantly upon clicking a radio button, in real-time

I'm working with a set of radio buttons that are linked to numbers ranging from 1 to 24. I need to show the selected number in another part of the page when a radio button is clicked. What would be the best way to achieve this? ...

javascripthtml

Utilizing Django to recycle an HTML block for multiple for loops within the same template

I have three specific states for an object - 1. to start, 2. started, and 3. finished. Upon filtering the objects in view, I pass three variables to the template - tostart_objects, started_objects, and finished_objects. My current approach involves loop ...

pythonhtmldjangodjango-templates

launch active link in pop-up dialog

I'm currently working on an Instagram iframe that fetches 9 random images with href links for pictures and spans with the same background. My goal is to display these images in a popup gallery. I've tried using Bootstrap for the popup, but I&apos ...

javascriptjqueryhtmlcsstwitter-bootstrap

Problem with jQuery hoverIntent and toggling visibility for a div

Hey there! I have a little div that I like to display to users every time they add something to their shopping cart. It pops up on the page for 5 seconds and then disappears. This mini cart display is activated by two events: HOVER: When a user hovers o ...

jqueryhtmlhoverintent

In PHP, check if the current iteration is less than 4 in a loop. If it is, then echo a specific

Consider this scenario: I have an array with 7 items and I am trying to separate them in every fourth iteration, just like this: $counter2 = 0; $counter3 = 0; $counter4 = 0; $sample_array = array('Aso','Pusa','Daga ...

phphtmlcss

Is it possible to trigger a function using an event on "Any specified selector within a provided array"?

Trying to figure out how to show/hide a group of divs with different IDs by executing a function after creating an array of IDs for the NavBar. I'm having trouble getting started, but here's what I was thinking: $.each(array1, function(i, value) ...

javascriptjqueryhtml