Bootstrap Navbar links overlap when resizing the browser

Question

I made Bootstrap Navbar logo in the middle. Here is a picture of the result:

however i have 1 issue: when i resize the browser, the nav links seems to overlap on each other.

what im looking for is when i resize the browser the links remain relative to each other and not overlap until it collapses in bootstrap toggle button. What would be the solution here?

here is HTML and CSS

html,
body {
  height: 100%;
  width: 100%;
  font-family: 'Arial', 'Poppins', sans-serif;
  background-color: #2d2d2d;
  margin: 0;
}

.navbar {
  width: 100%;
  z-index: 999;
  background: #2d2d2d;
  ;
  margin-top: 0;
  padding: 2em;
  /* display: flex; */
}

.navbar .nav-link:hover {
  color: rgba(255, 185, 197, 0.986) !important;
}

.navbar-brand {
  transform: translateX(-50%);
  left: 50%;
  top: .1%;
  position: absolute;
}

.navbar-nav li {
  padding-right: 40px;
  font-family: 'Myriad Pro';
  font-weight: bold;
  /* display: inline-block; */
}

#mt-nav-left {
  position: absolute;
  transform: translateX(60%);
  right: 60%;
}

#mt-nav-right {
  position: absolute;
  transform: translateX(-65%);
  left: 65%;
}

#banner {
  overflow: auto;
  z-index: 998;
}

#banner img {
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  #mt-nav-right {
    position: static;
  }
}

@media (max-width: 991px) {
  #mt-nav-left {
    position: relative;
  }
  #mt-nav-right {
    position: relative;
  }
}

<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
  <button class="navbar-toggler ml-auto custom-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="toggle">
                      <i class="fas fa-bars" style="font-size: 21px;"></i>
                    </span>
                  </button>

  <a class="navbar-brand" href="index.html">
    <img class="img-responsive" src="img/logo.png" width="85px" height="85px" class="d-inline-block align-top">
  </a>
  </div>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="nav navbar-nav ml-auto" id="mt-nav-left">
      <li class="nav-item" id="mt-navbar-link">
        <a class="nav-link scroll" href="index.html">HOME <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" id="mt-navbar-link">
        <a class="nav-link scroll" href="#">ABOUT</a>
      </li>
    </ul>

    <ul class="nav navbar-nav ml-auto" id="mt-nav-right">
      <li class="nav-item" id="mt-navbar-link">
        <a class="nav-link scroll" href="#">CONTACT</a>
      </li>
      <li class="nav-item" id="mt-navbar-link">
        <a class="nav-link scroll" href="#">VACANCIES</a>
      </li>
    </ul>
  </div>

</nav>

A "*better way of doing it*" depends entirely on what you're trying to achieve. Yes, the absolute positioning will be responsible for the overlap, but how do you want the navbar to behave? Do you want the icon to move to the left on narrow screens? To the right? Do you want it to appear above the text, below? You have to decide what you want to happen before knowing how to code it -- otherwise you're just asking for an opinion, which would be off-topic for StackOverflow. — Obsidian Age, Oct 28 '18 at 23:41
Thanks for the input, i edited the post, what im looking for is the links and icon remain in its position (so the icon is in the middle and links still next to it) but not overlap until it collapses into the bootstrap toggle button — Ashraf, Oct 29 '18 at 15:19
Possible duplicate of [Centering brand logo in Bootstrap 3 Navbar](https://stackoverflow.com/questions/23400234/centering-brand-logo-in-bootstrap-3-navbar) — Rafael Herscovici, Oct 29 '18 at 15:36

score 0 · Accepted Answer · answered Oct 29 '18 at 16:20

You can use flex-box to solve it. The idea is to place an empty box between two lists, with the following properties

flex-shrink: 0;
flex-basis: 100px //(not less then the width of your logo);

Look at the snippet that I made.

.navbar-brand {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.menu {
  width: 100%;
}
.menu .navbar-nav {
  flex-grow: 1;
}


/*
  THIS CLASS PREVENTS OVERLAPING
*/

.menu .separator {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100px;
  max-width: 250px;
  
  background: orange;
}

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

<nav class="navbar navbar-expand-sm navbar-light bg-light">
      <a class="navbar-brand" href="#">Navbar</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">
        <div class="d-flex menu">
          <ul class="navbar-nav mr-auto justify-content-end">
            <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="#">Link</a>
            </li>
          </ul>
          <!-- Box that prevents overlaping -->
          <div class="separator">
          </div>
          <ul class="navbar-nav mr-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="#">Link</a>
            </li>
          </ul>
        </div>
        
      </div>
    </nav>

score 0 · Answer 2 · answered Oct 29 '18 at 16:28

This is my approach for a navbar with your specifications using Bootstrap 4.

1) There are two navbars-collapse items, the first one with items justified to the end, the second one with the default items justified to start (we will call these A and C respectively).

2) The brand (called B) will be centered using the class mx-auto, the effect of overflowing the navbar is approached using next style (only on not collapsed mode):

@media (min-width: 768px) {

  .navbar {
    max-height: 75px;
  }

  .navbar-brand {
    bottom: -30px;
    position: relative;
  }
}

3) We manage the order of the items (A, B and C) using Order classes, on small screen devices the order will be B -> A -> C, on large screen devices will be A -> B -> C. We also use the Spacing utilities p classes for add some padding between items.

This is just my idea, you can check next example (on full screen mode) and play with the browser's width. I hope this helps you...

.navbar {
  z-index: 999;
  background: #2d2d2d;
}

.navbar .nav-link:hover {
  color: rgba(255, 185, 197, 0.986) !important;
}

.navbar-nav li {
  font-family: 'Myriad Pro';
  font-weight: bold;
}

@media (min-width: 768px) {

  .navbar {
    max-height: 75px;
  }

  .navbar-brand {
    bottom: -30px;
    position: relative;
  }
}

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">

<nav class="navbar navbar-expand-md navbar-dark sticky-top w-100">

  <button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target=".dual-nav">
    <span class="toggle">
      <i class="fas fa-bars" style="font-size:21px;"></i>
    </span>
  </button>

  <div class="navbar-collapse collapse dual-nav justify-content-end order-1 order-md-1">
    <ul class="navbar-nav">
      <li class="nav-item p-2">
        <a class="nav-link scroll" href="index.html">
          HOME <span class="sr-only">(current)</span>
        </a>
      </li>
      <li class="nav-item p-2" id="mt-navbar-link">
        <a class="nav-link scroll" href="#">ABOUT</a>
      </li>
    </ul>
  </div>

  <a class="navbar-brand mx-auto order-0 order-md-2 p-3" href="index.html">
    <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Newscycle-Circle.png" width="85px" height="85px">
  </a>

  <div class="navbar-collapse collapse dual-nav order-2 order-md-3">
    <ul class="navbar-nav">
      <li class="nav-item p-2" id="mt-navbar-link">
        <a class="nav-link scroll" href="#">CONTACT</a>
      </li>
      <li class="nav-item p-2" id="mt-navbar-link">
        <a class="nav-link scroll" href="#">VACANCIES</a>
      </li>
    </ul>
  </div>

</nav>

Thanks for the insight! interesting concepts – Ashraf Oct 29 '18 at 18:22 — Ashraf, Oct 29 '18 at 18:22

Bootstrap Navbar links overlap when resizing the browser

2 Answers2