adjusting the color of link texts in a bootstrap navbar when hovering

I am trying to customize the color of the links in my Bootstrap Navigation bar when hovered over. I have attempted to apply CSS, but it is not producing the desired effect. I prefer not to alter the existing code structure, and would like to achieve the hover effect using classes within the same tag. Some individuals opt for lists for their navigation bars, however, I do not wish to follow that approach.

I have experimented with adding CSS for hovering by defining a class within each tag.

<!doctype html>
        <html>
        <head>
        <title>Contact Us</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
            <link href="contact.css" type="text/css">
        </head>
        
        <body>
        <div class="container-fullwidth">
              <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
                <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse" id="NewMenu">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                            <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                            <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                        </div>
                    </div>
                </nav>
            </div>
        </body>
        </html>

I am aiming to change the color of the "services" link to green when hovered over.

htmlcssbootstrap-4

Answer №1

.services-link strong:hover {
  color: green;
}
<!doctype html>
<html>

<head>
  <title>Contact Us</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link href="contact.css" type="text/css">
</head>

<body>
  <div class="container-fullwidth">
    <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
      <h1 class="navbar-brand"><strong>Lightning Glass Co.</strong></h1>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div class="collapse navbar-collapse" id="NewMenu">
        <div class="navbar-nav">
          <a class="nav-item nav-link" href="About.html"><strong>About</strong></a>
          <a class="nav-item nav-link services-link" href="#"><strong>Products</strong></a>
          <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
        </div>
      </div>
    </nav>
  </div>
</body>

</html>

Answer №2

Here is the solution for you

.navbar-nav .services-link:hover{
color: #7FFF00 !important; /* your color */
}
<html>
    <head>
    <title>Contact Us</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link href="contact.css" type="text/css">
    </head>

    <body>
    <div class="container-fullwidth">
          <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="NewMenu">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                        <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                        <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                    </div>
                </div>
            </nav>
        </div>
    </body>
    </html>

Answer №3

To create a hover effect for the service link, use the hover selector.

.services-link:hover{
color:#00ff00 !important;
}
<html>
    <head>
    <title>Contact Us</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <link href="contact.css" type="text/css">
    </head>

    <body>
    <div class="container-fullwidth">
          <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="NewMenu">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                        <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                        <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                    </div>
                </div>
            </nav>
        </div>
    </body>
    </html>

Answer №4

To focus on the service, include an identification to the Services 

<a class="nav-item nav-link services-link" id="services-link" href="#"><strong>Services</strong></a>

Next, insert this into your CSS file

#services-link:hover {
color: green;
}

Answer №5

<!doctype html>
<html>

<head>

    <title>Digitian Hub</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1L"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizO"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0WL"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRL"
        crossorigin="anonymous"></script>
    <link href="digitianhub.css" type="text/css">

    <style>
        .nav-item:hover {
            color: blue !important;
            background: green;
        }
    </style>
</head>

<body>
    <div class="container-fullwidth">
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
            <h1 class="navbar-brand">
                <strong>Digitian Hub</strong>
            </h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu"
                aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="NewMenu">
                <div class="navbar-nav">
                    <a class="nav-item nav-link" href="home.html">
                        <strong>Home</strong>
                    </a>
                    <a class="nav-item nav-link services-link" href="#">
                        <strong>Services</strong>
                    </a>
                    <a class="nav-item active nav-link contact-link" href="contact-us.html">
                        <strong>Contact Us</strong>
                    </a>
                </div>
            </div>
        </nav>
    </div>
</body>

</html>

Answer №6

Here is the solution:

<!doctype html>
        <html>
        <head>
        <title>Contact Us</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
            <link href="contact.css" type="text/css">
        </head>
        
        <body>
        <div class="container-fullwidth">
              <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
                <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                    <div class="collapse navbar-collapse" id="NewMenu">
                        <div class="navbar-nav">
                            <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                            <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                            <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                        </div>
                    </div>
                </nav>
            </div>
            <style>
                .services-link:hover{
                    color: green !important;
                }
            </style>
        </body>
        </html>

Answer №7

To implement a hover effect on navigation, insert the following CSS code after the bootstrap CSS in the header:

.navbar-dark .navbar-nav .nav-link.services-link:hover {
  color: rgba(0,255,0,1);
}


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="contact.css" type="text/css">
<style type="text/css">
  .navbar-dark .navbar-nav .nav-link.services-link:hover {
    color: rgba(0,255,0,1);
  }
</style>

        <div class="container-fullwidth">
          <nav class="navbar navbar-expand-lg navbar-dark bg-success fixed-top">
            <h1 class="navbar-brand"><strong>Digitian Hub</strong></h1>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#NewMenu" aria-expanded="false" aria-controls="NewMenu" aria-label="toggleNavigation">
                <span class="navbar-toggler-icon"></span>
            </button>
                <div class="collapse navbar-collapse" id="NewMenu">
                    <div class="navbar-nav">
                        <a class="nav-item nav-link" href="Rishabh.html"><strong>Home</strong></a>
                        <a class="nav-item nav-link services-link" href="#"><strong>Services</strong></a>
                        <a class="nav-item active nav-link contact-link" href="Contact Us.html"><strong>Contact Us</strong></a>
                    </div>
                </div>
            </nav>
        </div>

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

Showing a series of text entries one after the other, each appearing with a smooth fade-in and fade-out

I am eager to showcase a list of text in a sequential order, implementing a fade-in/fade-out effect and concluding with the display of an image. Additionally, I aim to have all the text centered on the page. <div>a<div> <div>b</div> ...

javascripthtml

What is the best way to create a percentage glyphicon star icon that reflects a decimal average rating?

I have an average rating of 4.3 and I need to create a logic to display this as 4.3 stars (4 whole stars and the 5th star partially filled). The maximum rating is out of 5. Despite referring to examples on Stack Overflow and creating a JSFiddle, I am unabl ...

javascriptangularjshtmltwitter-bootstrap-3woff

The response from the ajax request is taking longer than expected

I have implemented the following code to pass and retrieve data using AJAX. function sendData(id) { var top = document.getElementById("tname").value; var first = document.getElementById("fname").value; var font_top = document.getElementByI ...

phphtmlajax

Focusing on a specific input category inside a div container

Struggling to customize the appearance of the last input type within the Jetpack plugin in WordPress. I have experimented with the following CSS: #subscribe-submit > input[type="submit"]::last-of-type { #subscribe-submit > input[type="submit"]:nth- ...

css

select an option from the dropdown modal

Having some trouble creating a modal from a drop-down menu item in Bootstrap beta 4.0. It's not working as expected, even though the same format is used for other modals on the page that are functioning properly. <li class="nav-item dropdown"> ...

htmltwitter-bootstrapbootstrap-4

When dealing with lengthy product names, Python Selenium may encounter difficulty retrieving the product's name

I need to extract information about all products (such as name, image, price, and link) from . However, I encountered a problem where the product card cannot display the full name of the product if it is too long, resulting in the name and price being retu ...

pythonhtmlstringselenium-webdrivercss-selectors

Creating a single header that can be used across multiple pages in HTML

Hello there, I've been on the hunt for a JavaScript code that will allow me to create one header for multiple HTML pages. Unfortunately, my search has come up empty-handed. Can anyone offer some advice on how to achieve this? Thank you! ...

javascripthtml

The usage of uppercase letters in HTML attributes

I'm struggling to get animation working on my chart. I have been using jQuery's append function to add an animation tag to my HTML page, but for some reason the animation isn't displaying properly. The issue seems to be related to the capita ...

htmljquerycssd3.jsjquery-animate

How come the button is shifting down even though it's set to display inline?

I've recently delved into the world of Bootstrap and CSS, but I'm facing a unique challenge. Despite my research efforts, I couldn't find a solution to my specific issue. I have a <div class="col-md-6"> where I've nested ...

htmlcsstwitter-bootstrapbootstrap-4

Getting access to the CSS class selector within the HTML document in the application

Upon examining this snippet of HTML: <html> ... <iframe> #document <html> ... <div className='change-me'></div> ... </html> </iframe> </html> This iframe has be ...

htmlcssreactjs

Is there a way to left-align these items?

I currently have 10 divs arranged side by side. I am trying to align the last divs to the left instead of center, but the solutions I found so far are not working. I've checked Bootstrap's documentation and tried using <div class="d-flex ...

htmlcss

Divide a cell table into multiple rows without distorting the table format

I am currently working on creating a screen layout that includes multiple rows and a column within a single cell. However, I'm facing issues with maintaining the formatting of my other table components. Although I have made some progress, whenever I ...

htmlcss

Utilizing Multiple Components on a Single Page in React.js

I'm currently setting up a React main page that renders two separate components - Header and Test. render() { return ( <Header /> <Test /> ); } The Header component contains static content, while the ...

javascripthtmlreactjsredux

Having trouble changing the Font Awesome icon on click?

I'm struggling to figure out why I can't change a font awesome icon using a toggle. I've tried various solutions but nothing seems to be working. Any insights on what might be causing this issue? (HTML) <span class="toggle-icon" ...

javascripthtmlcssfont-awesome

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

javascriptjquerycssvue.js

Tips for positioning a checkbox alongside labels within a container in Bootstrap

I am looking to create an onclick popup feature. https://i.sstatic.net/qoaTy.png This is the progress I have made so far. https://i.sstatic.net/Grxpd.png Currently, the layout takes up the entire page and I'm having difficulty aligning labels with ...

htmlcsswebbootstrap-4responsive-design

Using CSS Grid to Create Three Rows of Equal Height

I am facing an issue with my vertical menu that stretches 100% height. The rows inside this menu need to have equal height and be stretched to fit the container. Additionally, I noticed that adding a button seems to drop the container slightly below the pa ...

htmlcsstwitter-bootstrapmenu

choose a distinct value for every record in the table

My goal is to only change the admin status for the selected row, as shown in the images and code snippets below. When selecting 'in-progress' for the first row, I want it to update only that row's status without affecting the others. <td ...

htmlangulartypescript

Still having trouble getting @font-face to work with Firefox and htaccess

I've been struggling to load my custom font in Firefox despite numerous attempts. Here is the @font-face property code I have placed in the head section: @font-face { font-family: 'MeanTimeMedium'; src: url('http://sweetbacklove.com ...

css.htaccessfont-face

An HTML element becomes invisible when its display property is set to none using CSS

One of the issues I'm facing is with a div element that should be hidden by default using display: none, but for some reason, the CSS statement seems to be ignored. In my project, there are three key files: index.html: This file contains all the bu ...

javascripthtml