Transparent Bootstrap dropdown - css

Question

I am having some issues with creating this transparent dropdown effect in Bootstrap:
At the time of writing, it looks like this:
I've added a jsfiddle here in which I am experimenting trying to get the effect but it just doesnt seem to be working: https://jsfiddle.net/vuv9on49/. It also seems like the positioning of the dropdown is a bit off, it overlaps over the main navbar a bit, as seen in the second photo.
HTML
<div class="header" id="navbar-header">
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-logo">
<a class="navbar-brand" href="/">
<img src="http://marquesslondon.com/wp-content/uploads/2016/10/MarquessLdnBBwhtsml-2-e1477168862283.png">
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>
HOME
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>
Process
</li>
<li>
Our Look
</li>
</ul>
</li>
<li>
<a ng-href="/lifestyle">LIFESTYLE</a>
</li>
<li>
<a ng-href="/story">STORY</a>
</li>
<li>
<a ng-href="/contact">GET IN TOUCH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
CSS
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body,
html {
height: 100%;
margin: 0;
}
/*=======================================================
Header, footer and navbar
========================================================*/
.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 5px;
right: 5px;
}
.navbar-header {
width: 100%;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 2em;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar {
position: relative;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 5.5em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>.active {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 9.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu {
background-color: #474A53;
opacity: 0.8;
color: #fff;
}
.dropdown-menu ul {
margin-top: 0.7em;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.mq-footer {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
padding-bottom: 2em;
}
.mq-footer>.container>#footer-copyright {
font-size: 12px;
color: #737373;
}
.footer-icon {
font-size: 25px;
color: #000;
opacity: 0.8;
padding-top: 1em;
padding-right: 0.25em;
}
.footer-icon:hover {
opacity: 1;
cursor: pointer;
}
#footer-copyright {
margin-top: 2em;
}
#footer-links {
margin-top: 2em;
}
#footer-links ul {
padding-left: 25px;
}
#footer-links ul li {
display: inline;
margin-right: 25px;
}
#footer-links ul li a {
color: #333741;
}
How can I correct this?

Answer 1

I have changed in css margin-top:2em to margin-top:32px. I have increased little bit margin because dropdown depends on parent div and parent div(li) has below some space that's why dropdown overwrite to menu.
.navbar .navbar-nav {
margin-top: 32px;
}
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
body,
html {
height: 100%;
margin: 0;
}
/*=======================================================
Header, footer and navbar
========================================================*/
.navbar-logo {
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
}
.navbar-toggle {
position: absolute;
top: 5px;
right: 5px;
}
.navbar-header {
width: 100%;
}
.navbar .navbar-nav {
display: inline-block;
float: none;
margin-top: 32px;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-style: normal;
letter-spacing: 5px;
text-transform: uppercase;
font-size: 14px;
}
.navbar {
position: relative;
}
.navbar-shrink .navbar-nav {
display: none;
}
.navbar-shrink.navbar {
height: 5.5em;
}
.navbar-shrink.navbar>.container>.navbar-header>.navbar-brand img {
width: 250px;
height: 44px;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 300;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>.active {
color: #808ba0;
}
.navbar-default .navbar-nav>li>a:hover {
color: #808ba0;
font-weight: 300;
}
#navbar-header {
transition: 2s ease-in-out;
}
.navbar-default {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar-default.navbar-shrink {
background-color: rgba(51, 55, 65, 0.9);
}
.navbar {
position: relative;
border-radius: 0px;
border: 0px;
height: 9.5em;
-webkit-transition: height 300ms ease-in-out;
-moz-transition: height 300ms ease-in-out;
-o-transition: height 300ms ease-in-out;
transition: height 300ms ease-in-out;
}
.navbar-fixed-top {
position: fixed !important;
}
.navbar-brand img {
width: 250px;
height: 44px;
}
.nav {
text-align: center;
}
.navbar .navbar-collapse {
text-align: center;
}
.dropdown-menu {
background-color: #474A53;
opacity: 0.8;
color: #fff;
}
.dropdown-menu ul {
margin-top: 0.7em;
}
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0;
}
.mq-footer {
text-align: center;
font-family: 'Josefin Slab', sans-serif;
padding-bottom: 2em;
}
.mq-footer>.container>#footer-copyright {
font-size: 12px;
color: #737373;
}
.footer-icon {
font-size: 25px;
color: #000;
opacity: 0.8;
padding-top: 1em;
padding-right: 0.25em;
}
.footer-icon:hover {
opacity: 1;
cursor: pointer;
}
#footer-copyright {
margin-top: 2em;
}
#footer-links {
margin-top: 2em;
}
#footer-links ul {
padding-left: 25px;
}
#footer-links ul li {
display: inline;
margin-right: 25px;
}
#footer-links ul li a {
color: #333741;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="header" id="navbar-header">
<div navbar-shrink offset="50" scroll-class="navbar-shrink" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<div class="navbar-logo">
<a class="navbar-brand" href="/">
<img src="http://marquesslondon.com/wp-content/uploads/2016/10/MarquessLdnBBwhtsml-2-e1477168862283.png">
</a>
</div>
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div style="display: block">
<div class="collapse navbar-collapse" id="js-navbar-collapse">
<ul class="nav navbar-nav" id="navbar">
<li>
HOME
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">TAILORING</a>
<ul class="dropdown-menu">
<li>
Process
</li>
<li>
Our Look
</li>
</ul>
</li>
<li>
<a ng-href="/lifestyle">LIFESTYLE</a>
</li>
<li>
<a ng-href="/story">STORY</a>
</li>
<li>
<a ng-href="/contact">GET IN TOUCH</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>