CODEWITHSUNDEEP
htmlcss
Jwee
Jwee

Reputation: 37

Why is there a thin black line when I set my navigation bar background to transparent?

I am trying to make my navigation bar transparent, but there is a thin black line that appears for no apparent reason. Here's what it looks like: https://teampolair.com Thin Black line underneath menu options

My CSS is here:

.topnav {
        background-color: transparent;
        overflow: hidden;
        margin-bottom: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
        font-size: 18px;
    }
    .topnav b {
        float: right;
        padding: 0px 1em;
    }
    .topnav b img {
        height: 2.8em;
        width: auto;
        padding-top: .56em;
    }
    .topnav a {
        color: #E0E0E0;
        text-align: center;
        float: left;
        padding: 0.78em 1em;
        text-decoration: none;
        font-size: 1em;
    }
    .topnav a:hover {
        background-color: #E0E0E0;
        color: #302F2F;
    }
    .topnav a.active {
        background-color: #454544;
    }
    .topnav.scrolled {
        background-color: #000000;
        transition: background-color 200ms linear;
    }

The only parts of topnav that should affect his are anything related to "a" I believe. Is anyone able to help me out with my issue?

Upvotes: 0

Views: 529

Answers (1)

Johannes
Johannes

Reputation: 67748

There's a CSS rule for a on line 247 of "main.css" which contains border-bottom: dotted 1px rgba(0, 0, 0, 0.25);. If you remove that, you issue is solved.

Upvotes: 1

Related Questions