A link won't hover

Question

I have a nav bar and I would like for the a links to change color when I hover over them but for some reason, even though I used the :hover selector, it still won't work. Can anyone please help me?

<header>
      <nav class="navbar navbar-expand-lg navbar-dark static-top my-navbar my-navbar">
        <div class="container">
          <button`enter code here`
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarResponsive"
            aria-controls="navbarResponsive"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarResponsive">
            <ul class="navbar-nav ml-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home
                  <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#">About</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link" href="#">Services</a>
              </li>
              <li class="nav-item active">
                <a class="nav-link my-link" href="#">Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>

This is my CSS:

/* --- Navbar --- */

.my-navbar {
  background: rgba(116, 118, 119, 0.5);
}

ul li a {
  font-family: "Libre Baskerville", serif;
}

a:hover {
    color: black;
}
/* --- Navbar End --- */

I should also mention that I can't change the text colour either in the "ul li a" css block. — Teodor-Mihai Avasilcai, Sep 12 '20 at 15:58
no, sorry, that's a bug in post when I formatted the text. In my code there's no "enter-code-here: — Teodor-Mihai Avasilcai, Sep 12 '20 at 16:05
Does this answer your question? [How can I change link color and hover color in Bootstrap version 4?](https://stackoverflow.com/questions/34573324/how-can-i-change-link-color-and-hover-color-in-bootstrap-version-4) — Rayees AC, Sep 12 '20 at 16:15
Does this answer your question? https://stackoverflow.com/questions/16625972/change-color-of-bootstrap-navbar-on-hover-link — Rayees AC, Sep 12 '20 at 16:15

bron · Answer 1 · 2020-09-12T20:11:45.830

1

Because you are using navbar-dark you have to be very specific in your selector. For example this will do the job with a .navbar-dark.my-navbar without space.

.navbar-dark.my-navbar .navbar-nav .nav-link:hover,
.navbar-dark.my-navbar .navbar-nav .nav-link:focus {
  color: blue;
  background-color: yellow;
}

Edit You mentioned below that you've removed thenavbar-dark. In that case you may style the hamburger button with these selectors. Use the colors you like.

/* the button */
.my-navbar .navbar-toggler {
  background-color: transparent;
  color: rgba(0, 0, 0, 0.5);
  border-color: rgba(0, 0, 0, 0.2);
}

/* the icon in the button - change only 0, 0, 0, 0.5 (rgba color) */
.my-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

edited Sep 12 '20 at 20:11

answered Sep 12 '20 at 16:08

bron

1,457
1
9
18

It works if I do it that way however now the hamburger button is gone when I resize the page – Teodor-Mihai Avasilcai Sep 12 '20 at 16:12
1

The `navbar-expand-lg` in your html is the switch between hamburger or normal menu. – bron Sep 12 '20 at 16:16
This is really great :) upvote it because `!important` not choice if other way available – Rayees AC Sep 12 '20 at 16:20
So what should I do with navbar-expand-lg? Because if I get rid of navbar-dark, I can customize my a links but the hamburger button disappears when I resize the screen – Teodor-Mihai Avasilcai Sep 12 '20 at 16:30
To set another point where the hamburger (dis)appears, change the last 2 letters in `navbar-expand-lg`. Possible values are -sm -md -lg -xl – bron Sep 12 '20 at 19:51
I did change my post with an example to change the hamburger button.. – bron Sep 12 '20 at 20:13

score 0 · Accepted Answer · edited Sep 12 '20 at 21:27

0

If you are using Bootstrap try putting ' ! important ' in the css code. !important property in CSS means that all subsequent rules on an element are to be ignored, and the rule denoted by !important is to be applied. This rule overrides all previous styling rules -- the !important property increases its priority.

Your css code :

.my-navbar {
   background: rgba(116, 118, 119, 0.5) ! important;
}

ul li a {
    font-family: "Libre Baskerville", serif ! important;
}

a:hover {
     color: black ! important;
}

edited Sep 12 '20 at 21:27

user12137152

732
1
5
14

answered Sep 12 '20 at 16:11

Isaac.mm

76
6

Try to avoid the `!important` unless there is realy no other way to do the job. – bron Sep 12 '20 at 16:21
I know !important is not good practice however Bootsrap is very stubborn. I only needed it for the hover effect. Thank you very much, I have left you an upvote – Teodor-Mihai Avasilcai Sep 12 '20 at 16:23

A link won't hover

2 Answers2