Bootstrap.4 How to have a div with content above nav

Question

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">
        <a href="hello@hello.com">hello@hello.com</a>
      </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/

Can you clarify exactly what you're looking for? Do you want the navbar to have 2 rows? — Carol Skelly, Oct 29 '19 at 11:07
I want the contactinfo div to appear above the navbar, but both nav and contact info to still float right of the navbar-brand div — John, Oct 29 '19 at 11:18
Can you sketch out how you want everything to be placed both on desktop and mobile? It would help to figure out what needs to be achieved. — Raunaq, Oct 29 '19 at 11:19
I've updated my question with a link that shows what type of layout I'm looking for — John, Oct 29 '19 at 12:16

Carol Skelly · Answer 1 · 2019-10-29T11:39:56.403

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">
                    <a href="hello@hello.com">hello@hello.com</a>
                </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

This is a nice idea, but not quite the result I was looking for. I've updated my question to include a link that shows what I'm looking to achieve. Thanks for your help, the two navbars one toggle button seems like it might be a direction to help make this work. — John, Oct 29 '19 at 12:19

Bootstrap.4 How to have a div with content above nav

1 Answers1