CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Malik Brahimi
Malik Brahimi

Reputation: 16711

Nav Offset in Navbar

So I am trying to create an underline when a list item in the navigation bar is hovered but I experience this weird offset between the underline and the bar. Does anyone know how to fix this weird problem?

enter image description here

<html>
    <head>
        <link rel = "stylesheet" type = "text/css" href = "http://bit.ly/1WkdSlN">
        <link rel = "stylesheet" type = "text/css" href = "css/bootstrap.css">
        <script type = "text/javascript" src = "js/bootstrap.js"></script>
        <link rel = "stylesheet" type = "text/css" href = "css/stylesheet.css">
    </head>

    <body style = "background-color: red">


        <nav class = "navbar navbar-default">
            <div class = "container">

                <ul class = "nav navbar-nav navbar-left">
                    <li class = "text-uppercase"><a href="">Home</a></li>
                    <li class = "text-uppercase"><a href="">About</a></li>
                    <li class = "text-uppercase"><a href="">Intinerary</a></li>
                </ul>

                <ul class = "nav navbar-nav navbar-right">
                    <li class = "text-uppercase"><a href="">Service</a></li>
                    <li class = "text-uppercase"><a href="">Journey</a></li>
                    <li class = "text-uppercase"><a href="">Gallery</a></li>
                </ul>

            </div>
        </nav>


    </body>
</html>



.navbar-nav > li {
    font-family: montserrat;
    letter-spacing: 0.15em;
    font-weight: 700;
    font-size: 0.75em;
    border-bottom: 3px solid transparent;
    margin: 0px auto;
}

@media(min-width: 768px) {
    .navbar-nav > li:hover {
        border-bottom: 3px solid #222;
    }
}

Upvotes: 0

Views: 1372

Answers (2)

Alton
Alton

Reputation: 21

The reason this is happening is because bootstrap's css makes a 1px css border on .navbar classed DOM objects.

To get rid of the gap, just make a more specific selection and remove the border, such as

nav.navbar {
    border-bottom: 0px;
}

or something similar.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 114989

There is a 1px border on the navbar

.navbar {
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent; /* here */
}

Remove that.

Upvotes: 1

Related Questions