CODEWITHSUNDEEP
htmlcss
Jleibham
Jleibham

Reputation: 530

Weird stroke applying to text on hover

Hey guys I've been having a weird css quirk happen and I can't seem to find the culprit. I have some li links displayed on top of a image based background and when I hover the links they change colors but all apply a white border around the type which looks horrible.

enter image description here

I added a normalize.css stylesheet to my project hoping it would kill any standard style applying it but that didn't seem to work. Does anyone have any idea why this is happening?

Here is my styles for my navigation

Nav CSS 

nav {
    width: 100%;
    position: fixed;
    top: 20;
    z-index: 2;
}
nav ul {
    float: right;
    margin-right: 1em;
    list-style: none;
}
nav li {
    display: inline-block;
    padding: 0 20px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    color: black;
}

Nav HTML

<nav>
  <ul>
    <li><a ui-sref="about">About</a></li>
    <li><a ui-sref="menu">Menu</a></li>
    <li><a ui-sref="delivery">Delivery Locations</a></li>
    <li><a ui-sref="contact">Contact</a></li>
  </ul>
</nav>

enter image description here

Upvotes: 1

Views: 233

Answers (1)

Aziz
Aziz

Reputation: 7783

After investigating, I found that the problem was simply... you had duplicate navbar!

Since the navbar has a fixed position, both of them would be at the same exact place. So when you hover a link in the front navbar, it becomes black.. BUT the same link at the back remains white, thus, creating a weird stroke.

Here is a demo that reproduces your problem:

body { background:#111; }

nav {
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 20px; /* was missing a unit (px) */
}
nav ul {
    float: right;
    margin-right: 1em;
    list-style: none;
}
nav li {
    display: inline-block;
    padding: 0 20px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    color: black;
}
<!-- stroke you say? -->
<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Menu</a></li>
    <li><a>Delivery Locations</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

<!-- who's behind me? -->
<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Menu</a></li>
    <li><a>Delivery Locations</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

Solution: just remove the duplicated navbar... simple mistake.

body { background:#111; }

nav {
    width: 100%;
    position: fixed;
    z-index: 2;
    top: 20px; /* was missing a unit (px) */
}
nav ul {
    float: right;
    margin-right: 1em;
    list-style: none;
}
nav li {
    display: inline-block;
    padding: 0 20px;
}
nav a {
    color: #ffffff;
    text-decoration: none;
}
nav a:hover {
    color: black;
}
<nav>
  <ul>
    <li><a>About</a></li>
    <li><a>Menu</a></li>
    <li><a>Delivery Locations</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

jsFiddle: https://jsfiddle.net/azizn/bf28e5g9/

Notice how the <app-navbar> appears twice in your code:

duplicate navbar creates white stroke on hover

Upvotes: 1

Related Questions