Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet

<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <div class="navbar-header">
    <ul class="nav navbar-nav navbar-right social">
      <li><a href="#"><i class="fa fa-2x fa-facebook hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-twitter hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-instagram hidden-xs"></i></a></li>
      <li><a href="#"><i class="fa fa-2x fa-pinterest hidden-xs"></i></a></li>
    </ul>
  </div>
</div>
</nav>
</body>
htmlcsstwitter-bootstrap-3

Answer №1

To customize the appearance of your navigation bar, you will need to modify the default bootstrap styles in your CSS file:

.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #777;
}

Make sure to also delete the following code from your CSS:

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #000;
}

For more information, you can refer to this example on JSFiddle

Answer №2

Upon examination using developer tools, I have identified that the issue lies within the bootstrap classes themselves.

For example, when you activate the hover state on the navigation bar links, their immediate children will inherit a black color. It is necessary to overwrite the default styles provided by Bootstrap.

.navbar-default li a:hover > *, .navbar-default li a:focus > * {
  color: #777;
}

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

Accessing pseudo elements when their sibling is hovered can be achieved by using CSS selectors and combinators

I am struggling with the following html code: <div class="content"> <h2><a href="#">Hero</a></h2> <h2>Hero</h2> <div class ="tricky"></div> </div> The "co ...

htmlcss

In the realm of website design, the IE7 display

I am currently facing an issue with my gallery buttons when using IE7. The CSS code I have for the buttons is causing them to shift to the right hand side of the gallery, even though they work fine in other browsers. Here is the code: .prv_button{ flo ...

htmlcssinternet-explorer-7

In a multidimensional array, locate the key corresponding to the specified value

I am facing an issue with my code that involves an array containing various fruits with product ID and price as keys for different values. While I am able to retrieve the correct price, I am struggling to get the name of the chosen product. For instance, ...

phphtml

Is it necessary to send form data back with Express, or is there an alternative solution?

I am facing a simple problem with my handlers for /login get and post requests. Here is the code: loginRender(req, res) { let options = { title: 'Login', layout: 'auth.hbs' } res.render('login', options) } logi ...

javascripthtmlnode.jsformsexpress

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

As someone who isn't an expert in any specific coding language, I have a knack for piecing things together to make them work. However, my current challenge is stretching my technical abilities a bit too far. Here's what I'm trying to achieve ...

phpjavascriptjqueryhtmljson

implement a click event handler for GLmol (webGL)

Check out GLmol, a Molecular Viewer built on WebGL and Javascript by visiting You can see a demo of GLmol in action at I am interested in adding a click function to GLmol. For example, when I click on a ball, I would like to retrieve information about it ...

javascriptjqueryhtmlthree.jswebgl

Problems with spacing in Slick slider and lazyYT integration

Utilizing lazyYT helps to enhance the loading speed of YouTube videos. Once loaded, these lazyYT videos are then placed within a slick slider. However, an issue arises where the videos stick together without any margin between them. To address this problem ...

javascriptjqueryhtmlcssslider

Concealing spinner controls on HTML Ionic number input

Seeking a foolproof method to conceal spinner buttons on an HTML template for Ionic's number input field. Showcased below is the HTML code that exhibits an input with spinner buttons: <ion-input type='number'></ion-input> The ...

htmlcssionic-frameworkmobileionic3

AngularJS Validation does not verify the step limitation of an HTML number input field

Why isn't AngularJS validating the step="0.01" attribute in the second input? It seems to be working fine for the min and max attributes, but not for step. For instance: When entering 0.005, it still evaluates submitNewEntryForm.submitNewEntryAmount. ...

angularjshtmlforms

Get the div to occupy the rest of the available height

I am facing a challenge with two divs on my webpage. The bottom one contains content that expands the highest. The page is set to 100% height and width using the CSS property position: absolute. <style> body, html { height:100%, width:100% } ...

javascriptjqueryhtmlcss

Trouble with Printing Query - MySQL, PHP, and HTML -

In my IIS class, I encountered a puzzling issue that even my tutor couldn't solve. So here I am, attempting to describe it as best as I can! Currently, I'm using Xampp with Apache and MySQL. When I run a query and display the results in a table, ...

phphtmlmysql

Handling 404 errors in Nginx when using try_files directive for .html files

When presented with this SEF URL /attrazioni/madame-tussauds-londra.html, I am required to retrieve the actual URL which is /index.php?q=/attrazioni/madame-tussauds-londra.html I currently have a directive in place, however, it functions correctly only fo ...

phphtmlnginxurl-rewriting

Achieving the extraction of a particular string from an HTML element using JavaScript

<input id="WD01B3" ct="CB" lsdata="{2:'WD01B4',4:'Any',20:'\x7b\x22WDA_TYPE\x22\x3a\x22DROPDOWN_BY_KEY\x22,\x22WDA_ID\x22\x3a\x22ABCA950297D2C0C432BAB9BB ...

javascripthtmldom

Tips for resolving the issue of encountering the error message "Cannot POST /" while transitioning between different websites

Forgive my lack of knowledge, I'm still in the learning process :) I am attempting to navigate from an HTML website to a React-built website by clicking a button. The first website is a simple HTML page, while the destination website is more complex a ...

javascripthtmlnode.jsreactjs

What is the process to include a CSS file in PHP?

Can anyone guide me on how to include my CSS file in PHP? require('config.php'); $cssFile = "style.css"; echo "<link rel='stylesheet' href='/books/style.css'>"; What is the process of adding CSS to a PHP appl ...

phpcss

Switch up text using jQuery on css-tricks.com

I am having trouble with the code I found on a page about toggling text using jQuery from this link. Could someone please explain to me the significance of ':visible'? Thank you. Here is the fiddle link, and below is the code that I copied. Vi ...

jqueryhtmlcss

The web server is unaware of the CSS and JS references

After loading my ASP.NET MVC project on the web server, I encountered an issue where none of my CSS and JS references were loaded. Some of the references in my default layout are listed below: <head> <link href="/Scripts/css/bootstrap ...

c#htmlcssasp.net-mvc

sort jquery alphabetical characters

I have created some html and jQuery code that allows me to hide elements based on class name when I click on specific buttons in the filter div. However, I am now looking to add functionality to sort the elements alphabetically by class name when I press ...

jqueryhtml

What could be causing the malfunction in the cloning of the carousel item?

My goal was to create a carousel that displays multiple images in one slide. However, I encountered an issue where once the fourth image is reached, the other three images are forcibly hidden. I want to give credit to the original creator of this code snip ...

javascriptjavahtmljquerycss

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss