Вот как вы это делаете. Так как вы хотите сделать вашу панель значков над панелью навигации фиксированной, нам придется удалить класс fixed-top из navbar, потому что тогда присвоение position:fixed значку-панели будетперекрываются с нашим navbar.
Так что оберните и панель навигации, и панель иконок внутри элемента оболочки и сделайте этот элемент вместо position: fixed.Остальные вещи говорят сами за себя, если вы знаете основы CSS.
Вот фрагмент кода или скрипка , если вы не можете понять это,
#top-wrapper {
position: fixed;
top: 0; left: 0; right: 0;
background-color: green;
z-index: 999;
}
#top-wrapper .icon-bar {
width: 100%;
overflow: auto;
}
#top-wrapper .icon-bar ul {
float: right;
list-style: none;
margin: 0;
padding: 16px 16px 16px 0;
}
#top-wrapper .icon-bar ul li {
float: left;
padding: 0 16px;
border-right: 1px dotted #fff;
}
#top-wrapper .icon-bar ul li:last-child {
border: none;
}
#top-wrapper ul li i {
color: #FFF;
font-size: 14px;
}
.section {
height: 100vh;
background-color: grey;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- font awesome cdn -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="top-wrapper"> <!-- this is our wrapper div -->
<div class="icon-bar">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
<li><a href="#"><i class="fa fa-whatsapp"></i></a></li>
</ul>
</div>
<nav class="navbar navbar-expand-lg navbar-light navbar-custom">
<a class="navbar-brand" href="http://localhost/wp/">
<img src="http://localhost/wp/wp-content/uploads/2019/05/cropped-logo-1.png"> </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto"></ul>
<ul id="menu-menu-principal" class="navbar-nav">
<li id="menu-item-10" class="nav-item active"><a title="INICIO" class=" nav-link" href="#">INICIO</a>
</li>
<li id="menu-item-12" class="nav-item"><a title="NOSOTROS" class=" nav-link" href="#">NOSOTROS</a>
</li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19 nav-item"><a title="BLOG" class=" nav-link" href="#">BLOG</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20 nav-item"><a title="CONTACTO" class=" nav-link" href="#">CONTACTO</a></li>
</ul>
</div>
</nav>
</div>
<div class="section">Hello world</div>
<div class="section">Hello world</div>
<div class="section">Hello world</div>