Bootstrap - overriding + animations

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

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 {
    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{
        perspective: 35em;
    }
    .dropdown-menu .divider {
        background-color: #6daedf;
    }
    .dropdown-menu {
        display: block;
        transform: rotateX(120deg);
        backface-visibility: hidden;
        /* opacity: 0; */
/*         top: -10000px; */
        -webkit-transition: opacity 200ms ease-out, transform 200ms ease-out;
        -moz-transition: opacity 200ms ease-out, transform 200ms ease-out;
        -o-transition: opacity 200ms ease-out, transform 200ms ease-out;
        /*transition: opacity 200ms ease-out, transform 200ms ease-out;
    }
    .open>.dropdown-menu {
        opacity: 1;
        transform: rotateX(0deg);
      /*   top: auto; */
    }
    
    .prodile-dropdown {
        padding-left: 112px;        
    }
    .dropdown-profile-pic{
        position: absolute;
        top: 0px;
        left: 0px;
    }
    .dropdown-profile-pic img {
        width: 116px;
    }
}
@media (max-width: 768px) {
    .dropdown-menu:after {
        display: none;
    }
    .navbar-right .dropdown-menu:after {
        display: none;
    }
    .dropdown-profile-pic {
        display: none;
    }
}