samedi 25 juin 2016

Removing Bottom Shadow Bootstrap Navbar


I am using Bootstrap's default navigation bar for my website. I would like the navbar and the content below the navbar to be the same color, without any demarcation between them. However, it appears that there is a shadow on the bottom of the navigation bar that I can't seem to get rid of. shadow under navbar

I am using Bootstrap's default navbar template.

<nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
        <a class="navbar-brand" href="#">LOGO-GOES-HERE</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li>LINK</li>
                    <li>LINK</li>
                    <li>LINK</li>
                    <li>LINK</li>
                    <li>LINK</li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

I have tried setting box-shadow: none; on each of the navbar classes I suspect (from inspecting the elements) may be causing this (.navbar, .navbar-default, and .container-fluid) to no avail.

nav {
    box-shadow: none;
}
.navbar {
    .container-fluid {
        box-shadow: none;
    }
    box-shadow: none;
}

.navbar .navbar-collapse {
    box-shadow: none;
}

.navbar .navbar-nav {
    box-shadow: none;
}

.navbar-default {
    box-shadow: none;
}

I have also looked at Bootstrap's CSS and could not locate where the box-shadow is coming from.

Does anyone know any CSS I could write to remove this shadow from the bottom of the navigation bar, so that there is no line separating the navbar from the rest of the content?

Thank you so much for your time in advance.


Aucun commentaire:

Enregistrer un commentaire