Bootstrap Responsive Nav with top bar

Hey I am looking make a nav look like in the below image

but need help with responsiveness. when I shrink the screen it does not shrink with it. could somebody look and point me in the right direction. This includes inline styles but this will be removed!

My Nav HTML:

<div class="container">
    <div class="container social-bar-top">
        <img src="assets/images/phone-icon.png" alt="Phone Icon">
        <a class="social-bar-padding text-white">phone here</a>
        <img src="assets/images/mail-icon.png" alt="Email icon">
        <a class="social-bar-padding text-white">email here</a>
        <img src="assets/images/facebook-icon.png" alt="Facebook Icon">
        <img src="assets/images/twitter-icon.png" alt="Facebook Icon">
    </div>
<nav class="navbar navbar-expand-lg navbar-dark">
    <div class="container">
        <a class="navbar-brand nav-logo-margin" href="#">
            <img src="assets/images/dbs-logo.png" width="180" height="auto" alt="">
        </a>
        <button class="navbar-toggler" type="button"  data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">

        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link uppercase" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link uppercase" href="#">About Us</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link  uppercase" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Our Services</a>
                    <div class="dropdown-menu" aria-labelledby="dropdown01">
                      <a class="dropdown-item uppercase" href="#">IT Support</a>
                      <a class="dropdown-item uppercase" href="#">Remote Support</a>
                      <a class="dropdown-item uppercase" href="#">voip</a>
                      <a class="dropdown-item uppercase" href="#">Cloud Services</a>
                      <a class="dropdown-item uppercase" href="#">Boradband</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link uppercase" href="#">Contact Us</a>
                </li>
                <li class="nav-item btn-blue">
                    <a class="nav-link uppercase" href="#" style="padding-left:20px; padding-right:20px;">Remote Support</a>
                </li>
                <li class="nav-item btn-white" style="margin-left:10px;">
                    <a class="nav-link uppercase" href="#" style="color:#0f70b8; padding-left:20px; padding-right:20px;">Client Login</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

My CSS:

.navbar {
z-index: 1;
position: absolute;
}
.navbar {
background-color: transparent;
}
.top-nav-collapse {
background-color: #4285F4;
}

.dropdown:hover .dropdown-menu {
display: block;
}

.dropdown-menu{
 background-color:rgba(38, 100, 144, .8);
 color:white;
 border-radius:0px;
 }

.dropdown-item{
color:white;
}

.social-bar-padding{
 padding-left:10px; 
 padding-right:20px;
}

.social-bar-top{
top:8px;
position: absolute;
z-index:5;
left:64%;
}

.nav-logo-margin{
margin-top: 10px;
}

@media only screen and (max-width: 768px) {
.navbar {
  background-color: white;
}

.social-bar-top{
display:none;
}
}


@media (min-width: 992px){
.navbar-expand-lg .navbar-collapse{
top:15px;
position: relative;
left:40%;
}
}

If anybody can see any flaws that would be great to point out as i am quite new still to nav in bootstrap.