I managed to create the section i wanted the code i am using is:
CSS:
.menu {
background-color: lightblue;
overflow: hidden;
background-color:white;
}
.menu:after {
content: "";
border-bottom: 850px solid transparent;
border-right: 400px solid #0055b7;
position: absolute;
left: 80%;
top: 0;
}
.nav-menu ul {
list-style: none;
display: inline-flex;
}
.nav-menu ul li {
padding: 40px;
}
.blue-bg {
background-color: #0055b7;
}
HTML:
<div class="container-fluid">
<div class="row">
<div class="menu col-md-5">
<img class="paddingHeader" src="https://stackoverflow.com/questions/53205176/assets/images/headerlogo.png" />
</div>
<div class="content col-md-7 blue-bg">
<div class="nav-menu">
<ul>
<li><a class="text-white" href="">Home</a></li>
<li><a class="text-white" href="">About Us</a></li>
<li><a class="text-white" href="">Properties To Let</a></li>
<li><a class="text-white" href="">We Buy Houses</a></li>
<li><a class="text-white" href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
solved Bootstrap nav design