Adjust the color of the Bootstrap navbar on hover

I need help changing the color of the links in the navbar when they are hovered over with the mouse.

Here is my current code :

<header>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.html"></a>
            </div>

            <ul class="nav navbar-nav">
                <li><a href="index.html">Home</a></li>
                <li><a href="#">Product</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Contact us</a></li>
                <li class="your_account"><a href="#">Your Account</a></li>

            </ul>

            <!-- Search form -->
            <form class="form-inline d-flex justify-content-center md-form form-sm">
                <input class="form-control form-control-sm mr-3 w-75" type="text" placeholder="Inspire yourself" aria-label="Search">
                <i class="fas fa-search"></i>
            </form>
        </div>

    </nav>
</header>

I attempted to make changes using this code, but it didn't work as expected!

nav ul li:hover {
    color: red;
}

Do you have any suggestions for me?

htmlcssbootstrap-4

Answer №1

For the links, you need to apply the color override to the a tag instead of the li tag due to default styles:

nav ul li:hover a {
    color: red;
}
<nav class="navbar navbar-default">
    <ul class="nav navbar-nav>
        <li><a href="index.html">Home</a></li>
        <li><a href="#">Product</a></li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Contact us</a></li>
        <li class="your_account"><a href="#">Your Account</a></li>
    </ul>
</nav>

Answer №2

To create a hover effect on anchor tags, add the following code to your CSS:

nav ul li a:hover {
  color: red;
}

In this case, ensure that the hover effect is only applied to the anchor tags and not to the <li> elements.

Answer №3

navigation-bar ul li a:hover {
    text-color: red;
}

Alternatively,

.navbar-links a:hover{
  color: red;
}

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

Unique arrangement of hexagons in a honeycomb layout with precise centering

Currently, I am having trouble creating hexagonal blocks with content in a specific layout. My goal is to have four blocks starting with one at the top, followed by a row of two, and finishing with a row of one as shown in the image below. Unfortunately, a ...

cssresponsive-designhexagonal-tiles

After refreshing the page, Google Chrome finally displays the CSS styles correctly

I'm currently working on a JavaScript script to showcase images on a webpage. These images are loaded using an AJAX request and a CSS style is directly applied using jQuery. The script functions correctly on Firefox, Opera, and IE, but Google Chrome i ...

javascriptjquerycssgoogle-chrome

Prevent selection of future dates in HTML input using PHP exclusively

I am looking for a way to limit the date input on my form using PHP and HTML. <?php echo '<input type="date" name="doc" value="' . date("d-m-Y") . '" min="11-05-2014" max="' . date("d-m-Y") . '"/>'; ?> While rese ...

phphtml

Override the class inside the ul div

I am utilizing Dreamweaver's Spy menu without any sub items. By using a background image for "not active", another for "rollover" and attempting to apply one for "active". I have created a class for "active" and assigned it to one of the ul items. How ...

htmlcss

What steps can I take to have the text extend beyond the background at both the top and bottom edges?

I am attempting to replicate this design using CSS: https://i.sstatic.net/zXInr.png So far, this is what I have achieved: .container{ height: 30px; margin-bottom: 10px; } .redLine{ background-color: red; opacity: 0.5; height: 20px; bor ...

css

Loading a div using Ajax within a frame

My php page includes a div that is supposed to be populated by an Ajax call. function showcopay() { var apa = document.getElementById("alert_id").value; $("#copay").load('show_copay.php?pid='+apa); } The parent page of the div used to be ...

javascriptjqueryhtmlajax

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

What is the best way to exclude blank fields when displaying a form for printing?

I have a form created using PHP. Although it displays correctly, I would like it to check each field and exclude any div/element/field that is left empty when I choose to print the form. Below is an example of the form code in the printable PHP file. If n ...

phphtml

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Is there a way to convert this hover menu into an onclick menu? <div id='cssmenu'> <ul> <li class='has-sub'><a href='#'><span>Users</span></a> <ul> ...

phpcss

What is the best way to align a div in the middle of an input-group div?

When dealing with a nested div, where the parent div is styled with an input-group class, my goal is to have the nested div centered within the available line or on the next free line space. This is the desired layout I want to achieve regardless of the n ...

htmlcssbootstrap-5

What is the best way to show a <div> element when the ID is present in the URL?

I am in need of a solution to display specific content on the document based on the presence of a particular ID in the URL. In the current process, users go through a series of security checks and receive a cookie at the end to avoid repeating the check fo ...

javascriptphphtml

CSS Grid: Dividing items equally based on the number of items present

Currently, I am delving into grid layouts in CSS and experimenting with code to divide a row. Here is the snippet I am playing around with: .grid-sample { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; row-gap: 4rem; padding: 0 5rem ...

csscss-grid

What is the reason behind Bootstrap 5 inserting a line break following a span element?

Other questions similar to this one have been raised, but they do not cover a straightforward example of the problem. When looking at the code snippet below, you will notice that a line break is inserted after the closing span tag if Bootstrap 5 is utilize ...

htmlcssline-breaksbootstrap-5

Wavy CSS Animation

For assistance with my spinning image, please check out this fiddle: https://jsfiddle.net/dricardo1/9a8p6srb/ Hello! I'm struggling with a spinning image that has a noticeable wobble when rotating. I can't seem to find a solution to make the rot ...

javascripthtmlcsscss-animations

In the HTML body, create some breathing room on the side

While working on a virtual restaurant menu with bootstrap, I encountered an issue where there was a persistent little space at the right side of my page that remained unfilled. Despite trying various solutions and inspecting elements, I couldn't ident ...

htmlbootstrap-5

Enabling visibility of overflowing text in dynamically inserted divs without using scroll bars

Is there a way to set the text overflow to visible without scroll bars in dynamically added <div>s? Despite what the documentation says, it doesn't seem to be the default behavior and I'm struggling to understand why. Adding text directly t ...

javascripthtmlcssoverflow

Troubleshooting techniques for resolving CSS issues with the video.js package in ReactJS

When using video.js in react to build a video player, I encountered an issue with the npm package not providing its inbuilt CSS. How can I add the inbuilt CSS of video.js? Instead of the control bar, I am getting something different than what is shown in t ...

cssreactjs

The combination of jQuery html() method and the &amp; symbol is

While conducting a search among a list of individuals, I encountered an issue with displaying results on the fly. Specifically, I needed a link to appear as: chatid=18&userid=45&create=new However, after displaying the results using the following ...

phpjqueryhtml

Mismatched communication in the menu between the list item <li> and the anchor tag <a>

Why is the dropdown ul in 'Menu Item 2' not aligned at the top of its parent li element? Despite setting the dropdown ul CSS as: position:absolute; top:0; left:0; I expected it to cover the entire parent element from the top left corner. Some ...

htmlcsscss-positionabsolute

Creating a conditional statement in jQuery that will append text to a specific DIV element after a form has been successfully

I currently have a form set up that is functioning properly, but I am looking to make some changes. Instead of redirecting the user to a new page with a success message upon submitting the form, I want the success message to be displayed in a div next to t ...

javascriptjqueryhtmlformsconditional-statements