Bootstrap - overriding

Overriding bootstrap styles (mostly color, dropdshadows, borders etc.) by duplicating their base selectors into our custom css file.

by Abra Cadabra

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a>

                </li>
                <li><a href="#">Link</a>

                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>

                        </li>
                        <li><a href="#">Another action</a>

                        </li>
                        <li><a href="#">Something else here</a>

                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>

                        </li>
                        <li class="divider"></li>
                        <li><a href="#">One more...

CSS

.dropdown-menu {
    opacity: 0;
    -webkit-transition: opacity 500ms ease-out 1s;
    -moz-transition: opacity 500ms ease-out 1s;
    -o-transition: opacity 500ms ease-out 1s;
    transition: opacity 500ms ease-out 1s;
}
.open>.dropdown-menu {
    opacity: 1;
}
.dropdown-menu {
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid #6daedf;
}
.dropdown-menu:after {
    content:' ';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #6daedf transparent;
    content:' ';
    position: absolute;
    top: -6px;
}
@media (min-width: 768px) {
    .navbar-right .dropdown-menu:after {
        right: 2px;
    }
    .dropdown-menu .divider {
        background-color: #6daedf;
    }
}
@media (max-width: 768px) {
    .dropdown-menu:after {
        display: none;
    }
    .navbar-right .dropdown-menu:after {
        display: none;
    }
}