Bootstrap.4 How to have a div with content above nav [duplicate] - html

Question

This question already has answers here:
Bootstrap 4 navbar with 2 rows
(3 answers)
Bootstrap 4: Navbar with logo and 2 rows
(2 answers)
Closed 3 years ago.
I want to have contact information show up above the navigation but it keeps trying to float it to the left. I want the content to collapse with the nav on mobile. I don't know what I'm missing here.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://placehold.it/150x50?text=Logo" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<div class="container contactinfo">
<div class="row">
<div class="col-4 headerPhone">
123-456-7890
</div>
<div class="col-4 headerEmail">
hello#hello.com
</div>
<div class="col-4 headerSocial">
<a href="#" target="_blank" title="Facebook">
<i class="fab fa-facebook-square"></i>
</a>
<a href="h#" target="_blank" title="Twitter">
<i class="fab fa-twitter-square"></i>
</a>
<a href="#" target="_blank" title="Pinterest">
<i class="fab fa-pinterest-square"></i>
</a>
</div>
</div>
</div>
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
https://codepen.io/johndu/pen/YzzxgyR
I'm looking for a result similar to this: https://ap-luxor.agentimage.com/

Answer 1

If you want the contact info above the navbar (but still collapsed on mobile by the same toggle button) why not use a separate navbar?
https://www.codeply.com/go/HAUo3s24Pa
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<div class="collapse navbar-collapse">
<div class="nav navbar-nav w-100 flex-row">
<div class="navbar-text headerPhone">
123-456-7890
</div>
<div class="navbar-text headerEmail text-center mx-auto">
hello#hello.com
</div>
<div class="navbar-text headerSocial text-right">
<a href="#" target="_blank" title="Facebook">
<i class="fab fa-facebook-square"></i>
</a>
<a href="h#" target="_blank" title="Twitter">
<i class="fab fa-twitter-square"></i>
</a>
<a href="#" target="_blank" title="Pinterest">
<i class="fab fa-pinterest-square"></i>
</a>
</div>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="http://placehold.it/150x50?text=Logo" alt="">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
Also see: Bootstrap 4 collapsing two navbars into one toggle button