The active link color for navigation in Bootstrap 4

I am trying to update the active menu links to display in green on my website. Despite various attempts, I have not been successful in changing the color. Can anyone provide guidance on how to proceed? My website is built with Bootstrap 4 and mdbootstrap.

Below is the HTML code snippet:

<nav class="navbar navbar-expand-md navbar-light sticky-top">

    <div id="navcontainer" class="d-flex container py-2 justify-content-center align-items-center">
      
      <!-- Logo+Nev -->
      <div id="nevtitulus" class="d-flex align-items-start mr-lg-5 mr-md-3">
        <div>
          <img id="logo" class="mr-lg-3 mr-2" src="images/DRLJ_logo.png" alt="logo">
        </div>
        
        <div class="text-center">
          <span id="logoname">Dr. Langmár Judit</span>
          
          <p id="logodesc" class="d-none d-md-block">Akupunktőr, üzemorvos, orthopaed szakorvos</p>
          <p id="logodesc2" class="d-md-none">Akupunktőr, üzemorvos, <br> orthopaed szakorvos</p>
        </div>
      </div>

      <div id="hamburger-wrapper" class="ml-5 ml-md-0">

        <div id="button-wrapper" class="d-flex szelesseg justify-content-center">
          <button class="navbar-toggler" type="button"
            data-toggle="collapse" data-target="#navcollapse" aria-controls="navcollapse"
            aria-expanded="false" aria-label="Toggle Navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>

        <div class="collapse navbar-collapse" id="navcollapse">
          <ul class="nav navbar-nav text-center">
            <li class="nav-item"><a class="nav-link" href="#fooldal">Főoldal<span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#kezelesek">Kezelések</a></li>
            <li class="nav-item"><a class="nav-link" href="#arak">Árak</a></li>
            <li class="nav-item"><a class="nav-link" href="#galeria">Galéria</a></li>
            <li class="nav-item"><a class="nav-link" href="#rolam">Rólam</a></li>
            <li class="nav-item"><a class="nav-link" href="#kapcsolat">Kapcsolat</a></li>
          </ul>
        </div>
      </div>
    </div>
</nav>

The CSS modifications that I attempted without success (only hover effect is working):

.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: rgb(129, 91, 73);
background-color: rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-nav .nav-item .nav-link:focus {
  color: #0DB159;
}

.navbar-light .navbar-nav .nav-item:active .nav-link {
  color: #0DB159;
}

#navcollapse a:active {
    color: #0DB159;
}

The following CSS rule works only if related anchor tags are removed from the body:

.nav.navbar-nav .nav-item .nav-link:focus {
  color: #0DB159
}

Although unsuccessful, I also tried the following CSS changes:

.nav.navbar-nav .nav-item .nav-link:focus,
.nav.navbar-nav .nav-item:focus,
.nav.navbar-nav .nav-item a:focus,
.nav.navbar-nav .nav-item .nav-link a:focus,
.nav.navbar-nav .nav-item .nav-link:active,
.nav.navbar-nav .nav-item:active,
.nav.navbar-nav .nav-item a:active,
.nav.navbar-nav .nav-item .nav-link a:active {
  color: #1c8a66}

A friend suggested using the .active class in CSS but it did not yield the desired result either:

.nav.navbar-nav .nav-item .nav-link.active {
  color: #1c8a66
}

Here is an example highlighting the issue when the corresponding anchor tag exists:

https://www.w3schools.com/code/tryit.asp?filename=FVHSP1KJDQZY

cssbootstrap-4navigationbar

Answer №1

Make sure to select CSS classes with a specificity that matches the Bootstrap CSS selectors.

.nav-dark .menu-item.active .link,
.nav-dark .menu-item .link:active,
.nav-dark .menu-item .link:focus,
.nav-dark .menu-item:hover .link {
    color: #FF5733;
}

Check out the demo here: https://example.com/demo123

Answer №2

To highlight the current web page and html file, simply add the class active to li.nav-item like this: 

<li class="nav-item active">

In your CSS, target the active link with .active a and apply styles such as .active a { color: black; }

Add a hover effect by styling the last element in the nav tag like so: 

.sticky-top a:hover { color: black; }

If you're on the home page, only highlight that specific link. Repeat this process for other html files and ensure the correct li.nav-item tags are styled accordingly.

Answer №3

Apologies for the delay in responding to this inquiry. I recently came across a solution that worked for me while searching for an answer.

To achieve the desired result, I discovered that adding the class "active" to the link pointing to the current page was the key. For example, when clicking on Active Page Link from the homepage, it directs me to active_page.html. To implement this, I updated the HTML as follows:

<a class="nav-link active" href="../static/active_page.html">Active Page</a>

In essence, include "active" in the anchor's class when linking to the same page (I hope that explanation is clear). Each link corresponds to an .html page, and for links pointing to their own page, add "active" to the a tag class (as shown above).

If you wish to customize the color of the active link, inspect the element to identify the applied CSS style and modify the corresponding CSS file accordingly.

Answer №4

li.selected a { color: #0DB159; }

HTML Code

<ul class="nav navbar-nav text-center">
            <li class="nav-item selected"><a class="nav-link" href="#fooldal">Home Page<span class="sr-only">(current)</span></a></li>
            <li class="nav-item"><a class="nav-link" href="#treatments">Treatments</a></li>
            <li class="nav-item"><a class="nav-link" href="#prices">Prices</a></li>
            <li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
            <li class="nav-item"><a class="nav-link" href="#about">About Me</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>

Answer №5

After much trial and error, I was able to resolve the issue without relying on bootstrap. It's unfortunate that basic bootstrap.js doesn't include a feature to automatically switch the active state from one navigation element to another...

In the end, I implemented this JS solution to highlight the active navigation menu:

https://codepen.io/gearmobile/pen/bByZdG

$( '#topheader .navbar-nav a' ).on( 'click', function () {
$( '#topheader .navbar-nav' ).find( 'li.active' ).removeClass( 'active' );
$( this ).parent( 'li' ).addClass( 'active' );
});

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

The download attribute is not functioning properly on both Chrome and Edge browsers

I've been trying to use the download attribute, but it doesn't seem to be working. I have also attempted to use the target attribute to see if there are any issues with downloading from the server or from a web (https) source. Unfortunately, noth ...

javascripthtmlcssxhtml

Employing jQuery for adding a class to the initial TD in every table row

Currently, I am dealing with a table structured like this: <table width="100%" border="0" cellspacing="0" cellpadding="0" id="tablecontent"> <tr class="tablerow"> <td>This is the td I want to add a class to.</td> <td c ...

jqueryhtmlcssclasshtml-table

CSS: The Ultimate Guide to Concealing the Second Row in a Table

I have a single table in my code: <table> <tr><td>sample data 1</td></tr> <tr><td>sample data 2</td></tr> <tr><td>sample data 3</td></tr> <tr><td>sample data 4</t ...

htmlcss

Ensure that the central section of the slider remains illuminated

Looking for help with customizing my "product" slider, lightSlider. I want the middle div to always be highlighted when navigating through the slider. Here's what it looks like currently: Link to screenshot - current. My goal is to achieve this look: ...

javascriptjqueryhtmlcsswordpress

Disabling the child element from triggering the parent element's onclick function, while still allowing it to respond to its own content

My list elements have onclick-functions that change the display of each element and its child div, moving them to the top of the list. Clicking again reverses this effect. The issue arises because the child div contains search fields, clickable pictures, ...

javascripthtmlcss

Generating PDFs from websites using code

Currently, I have my resume available online as an HTML page at www.mysite.com/resume.html. Whenever I need a PDF version of it, I rely on Google Chrome's print dialog to save it as a PDF using my print CSS stylesheet. However, I am looking for a way ...

cssgoogle-chromepdfprintingresume

Creating text input without borders using HTML and CSS

I have managed to create text inputs without borders using HTML and CSS, but I am facing an issue. Whenever I click on the input field, a yellow border appears instead of the one I removed. It seems like this is coming from the default stylesheets, and I&a ...

htmlcsstextborderless

The background image does not appear on the animated div until the browser window is resized

Encountering an unusual problem - I have styled a div element using CSS to be initially hidden: .thediv { width: 100%; height: 87%; position: fixed; overflow: hidden; background-image: url(pics/FrameWithBG1280.png); background-attachment: fixe ...

jquerycssbackground-imagevisibilitywindow-resize

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

javascripthtmlbootstrap-4

Adjust the font size of MaterialUI icons using CSS

I am currently facing an issue where I need to increase the size of my icons by 200px, but they are defaulting to 24px which is the standard for all Google Icons. Any suggestions on how to solve this? HTML <div class="col span-1-of-4 box"> <i ...

htmlcssiconsmaterial-ui

Scroll overflow can be hidden

I'm working on a project with a div containing scrollable content, but I'm struggling to get the header to overflow its parent element. It seems that using overflow: scroll is causing the element to have overflow: hidden as well. Any assistance ...

htmlcssoverflow

Issue on my website specifically occurring on Google Chrome and mobile devices

Hello, I seem to be having a CSS issue. Interestingly, my menu (burger menu) works perfectly fine on Firefox but is not functioning properly on Chrome and mobile devices. When I click the button, the menu doesn't open. Has anyone encountered a simil ...

htmlcssmobile

Loading images in advance using JavaScript

I have been searching through multiple forums and cannot seem to figure out the issue. The problem I am encountering is related to a website where there are three images with a hover effect. When the page first loads, there is a delay in loading the backgr ...

javascriptphphtmlcss

Rearrange items in a display: contents wrapper using CSS Grid

I'm having trouble positioning descendants in a root grid while they are enclosed in a container with display: contents. The issue I am facing is that one element is not being correctly placed within the grid: .wrapper { width: 80ch; margin: a ...

htmlcsscss-grid

What could be causing this image to disregard the designated width value?

https://i.stack.imgur.com/bPH4t.png While working on my project with Next.js, I encountered an issue with the IconText component provided by Next.js. Even though I specified a width value for the image, it seems to be ignoring it. Below is the structure o ...

cssnext.js

iOS hover menu behavior: Close dropdown when the same element is tapped again on iPads

The navigation bar features categories such as: politics, economy, education Upon clicking on these categories, a dropdown menu appears with locations like: asia, europe, North America What I am looking for is this: If the user clicks (tabs) or hovers (o ...

javascripthtmljquerycss

Styling certain UL and LI elements with CSS properties

Greetings everyone! I constantly struggle when it comes to making my CSS cooperate. I have some code that involves using ul and li tags. However, I only want to apply that styling to specific sections of my HTML code rather than all instances of the ul and ...

htmlcsscss-selectors

Adaptive Container with Images that are not stretched to full width

Is there a way to achieve the same effect as seen in images 2 and 3 here: Although these images already have their own "padding," I'm curious if it can be replicated using just jQuery and CSS? I would appreciate any help or insights on this. Thank y ...

javascriptjquerycssresponsive-design

A guide to injecting HTML banner code with pure Vanilla Javascript

Looking for a solution to incorporate banner code dynamically into an existing block of HTML on a static page without altering the original code? <div class="wrapper"><img class="lazyload" src="/img/foo01.jpg"></div> <div class="wrapp ...

javascripthtmlcsscss-selectors

Can a pledge be honored at a precise moment?

I have implemented transitions on my web page. When clicked, everything fades out to an opacity of 0 over a duration of 1 second. Then, a new page is swapped in and everything fades back in to an opacity of 1 over another 1-second duration. The issue aris ...

javascriptjquerycsspromise