Using bootstrap how can i make a div that sits outside of the nav container without using absolute or negative left margin

Question

Currently i have a div that contains some icons in it. I have it sitting outside of my nav container, which is how I want it. The only way i've been able to seem to make it work is by making the css div absolute or giving it a margin-left: -110px .

My problem. This is fine when being displayed in desktop but breaks when its being displayed on mobile. When i don't do that, the div pushes my nav container to the right. I havne't figured out a way to make it mobile or know if its possible. Please see the image of what i'm trying to achieve.

Here is my current code

<nav class="navbar navbar-expand-lg bg-light navbar-dark fixed-top" id="mainNav">
    <div class="mysocion text-white ml-5">
      <a href="https://www.facebook.com/xxxxxxx">
        <i class="fab fa-facebook fa-2x mr-2"></i>
      </a>
      <a href="">
        <i class="fab fa-twitter fa-2x mr-2"></i>
      </a>
      <a href="https://www.instagram.com/xxxxxxxxx">
        <i class="fab fa-instagram fa-2x"></i>
      </a>
    </div>
    <div class="container">
      <div class="headerlogo">
        <a class="navbar-brand" href="#page-top">
          <img src="img/xxxxxxxx.png" alt="" class="img-fluid">
        </a>
      </div>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
        aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        Menu
        <i class="fa fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav text-uppercase mr-auto">
          <li class="nav-item dropdown">xxxxxxxxxxxxxx</a>
            <ul class="dropdown-menu">
              <li>
                <a href="xxxxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
              </li>
              <li>
                <a href="xxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
              </li>
              <li>
                <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxxx</a>
              </li>
            </ul>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link js-scroll-trigger dropdown-toggle" href="xxxxxxxxxxx.html" data-toggle="dropdown">xxxxxxx</a>
            <ul class="dropdown-menu">
              <li>
                <a href="xxxxx.html" class="dropdown-item">Trash It Door Step</a>
              </li>
              <li>
                <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxx</a>
              </li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="aboutxxxx.html">xxxxxxxxxxx</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="requestxxxxx.html">xxxxxxxxx</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll-trigger" href="xxxxxt.html">xxxxxx Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Answer 1

If you don't want to use absolute, you need to separate the header with the nav and all what comes below into two separate containers.

I'd set both to be container-fluid (bootstrap class for full width container), then you create a row and give it 3 col, something like:

<div class="container-fluid">
  <div class="row"> // may be row-fluid instead, can try
    <div class="col-xs-12 col-lg-3">
      <div class="pull-right"> Your icons div </div>
    </div>
    <div class="col-xs-12 col-lg-6">
      <nav> Your nav bar stuff </nav>
    </div>
    <div class="d-none d-lg-flex col-lg-3">
    </div>
  </div>
</div>

This way on mobile it will: hide the third column, and set the first and the second to full width (col-xs-12).

The part below at this point, since class container has a fixed width and col-6 works on a window percentage, the two would have a different width so you can also set a container-fluid with d-none d-lg-flex col-3 (empty, will disappear on mobile), col-xs-12 col-lg-6 (with inside what is in the container right now), and another d-none d-lg-flex col-3 (empty, will disappear on mobile).

Answer 2

You can simply apply your position:absolute (or negative margin) only when the page has a width greater than the minimal width at which you want to display it outside the container, using a @media query. Example:

@media(min-width: 1300px) {
  #your-div {
    position: absolute;

    /* code here only applies to #your-div when page is wider than 1300px */
  }
}

And here's a live example, with Bootstrap. Run it in full screen mode and resize your browser window:

#your-div {
  background-color: #c00;
  color: white;
  display: flex;
  align-items: center;
  min-height: 40px;
  white-space: nowrap;
}

@media(min-width: 1300px) {
  #your-div {
    position: absolute;
    right: calc(100% + 10px);
  }
}

@media (max-width: 767px) {
  #your-div {
    display: none;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<nav class="site-header sticky-top py-1">
  <div class="container d-flex flex-column flex-md-row justify-content-between position-relative">
    <a class="py-2" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>
    </a>
    <a class="py-2 d-none d-md-inline-block" href="#">Tour</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Product</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Features</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Enterprise</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Support</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Pricing</a>
    <a class="py-2 d-none d-md-inline-block" href="#">Cart</a>
    <div id="your-div" class="px-2">Your div</div>
  </div>
</nav>
<div class="container" style="background-color: #f9f9f9;min-height: calc(100vh - 90px);"></div>

Answer 3

Since i was new to bootstrap its kind of slipped my mind that i can make different sections containers different sizes. So i realized this after a few days on chewing on the answers that was given. I ended up using below code to create what i wanted. I made my nav container a container-fluid and made my outer div a col 3 and flex it reverse.

<nav class="navbar navbar-expand-lg bg-light navbar-dark fixed-top" id="mainNav">
<div class="container-fluid">
  <div class="col-lg-3 d-flex flex-row-reverse mysocion text-white mr-2">
    <a href="https://www.facebook.com/xxx">
      <i class="fab fa-facebook fa-2x mr-2"></i>
    </a>
    <a href="">
      <i class="fab fa-twitter fa-2x mr-2"></i>
    </a>
    <a href="https://www.instagram.com/xxxxx/">
      <i class="fab fa-instagram fa-2x mr-2"></i>
    </a>
  </div>
  <div class="hlogo mr-5">
    <a class="navbar-brand" href="home.html">
      <img src="img/Logocroped.png" alt="" class="img-fluid">
    </a>
  </div>
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive"
    aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    Menu
    <i class="fa fa-bars"></i>
  </button>
  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav text-uppercase mr-auto">
      <li class="nav-item dropdown">xxxxxxxxxxxxxx</a>
        <ul class="dropdown-menu">
          <li>
            <a href="xxxxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
          </li>
          <li>
            <a href="xxxxxxxx.html" class="dropdown-item">xxxxxxxxxxx</a>
          </li>
          <li>
            <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxxxxxx</a>
          </li>
        </ul>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link js-scroll-trigger dropdown-toggle" href="xxxxxxxxxxx.html" data-toggle="dropdown">xxxxxxx</a>
        <ul class="dropdown-menu">
          <li>
            <a href="xxxxx.html" class="dropdown-item">Trash It Door Step</a>
          </li>
          <li>
            <a href="xxxxxxxxx.html" class="dropdown-item">xxxxxxxx</a>
          </li>
        </ul>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="aboutxxxx.html">xxxxxxxxxxx</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="requestxxxxx.html">xxxxxxxxx</a>
      </li>
      <li class="nav-item">
        <a class="nav-link js-scroll-trigger" href="xxxxxt.html">xxxxxx Us</a>
      </li>
    </ul>
  </div>
</div>