Bootstrap col-md becomes larger because of absolute position of div inside

Question

I have problem with the absolute positioning of Logo image in the nav.

My logo must be half on the navbar and half bellow.

When I add a class inside col-md-3 with te property position: absolute the size of the parent col-md-3 becomes larger than normal col-md-3.

This is how it should look:

scheme

For better positiong of the content I pulled the nav and logo in one row and two cols (col-md-2 and col-md-10). The conntent bellow the first row is one row with two cols - col-md-offset-2 col-md-7 and col-md-3. The cols ow both rows must have the same witdh.

The code: http://www.bootply.com/VJYSA55MEt

My question is why the logo col-md-3 is bigger then the col-md-3 in the second row. Both cols must have the same width...i don't know how to fix the width...

Or have you a better way to handle this (primary, that the logo is on and bellow the navbar, and that the content bellow the navbar begins right to the logo)

What is the question? What do you want to know? And, how about a tableless design? [W3C](https://www.w3.org/2002/03/csslayout-howto) shows how to do it and this [question](http://stackoverflow.com/questions/14461103/why-is-the-bootstrap-grid-layout-preferable-to-an-html-table) explains why you should go for tableless. — JrBenito, Jun 13 '16 at 16:43

score 3 · Answer 1 · answered Jun 13 '16 at 16:46

3

No need to use col-md in Absolute div. Use Absolute in logo And Relative in Nav Then Give some Top value it will came down. like

.logo{
  position:absolute;
  top:20px;
}
.nav{
  position:relative;
}

answered Jun 13 '16 at 16:46

Mamunur Rashid

732
4
22

Also give left value If need. – Mamunur Rashid Jun 13 '16 at 16:47
How can I be sure that my logo and divs under it and right of it will have the same width if I dont use col - md – n0p Jun 13 '16 at 16:53
use width height for your logo. And give a z-index value in logo for keen it front – Mamunur Rashid Jun 13 '16 at 16:56
I know that I can fix that with adding height and width, but it's more complicated to adjust the dimensions for smaller divices. I think that is way batter to add the logo in col-md-3, and add img-responsive class to the logo so, the height and width are adjusts auto it's important that the logo div is the same width as the div under it...therefore i want use col-md-3. to prevent diferent sizes. – n0p Jun 13 '16 at 17:42
use height width by % than it will be responsive – Mamunur Rashid Jun 13 '16 at 17:46
Thats correct, but it remains to adjust the width so the logo fits the width of the col-md-3 under itd. I want the exact this http://www.imagebam.com/image/c78bce489244241 – n0p Jun 13 '16 at 17:51

Gleb Kemarsky · Accepted Answer · 2016-06-13T20:38:13.857

I prefer to use default layout. If you increase the height of the logo, it comes out of the navbar. This is its peculiarity. Typically this becomes a problem. But now this is the way to solve your task.

Please check the result.

http://www.bootply.com/u2QhCYtrQ3

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:focus, 
.navbar-default .navbar-nav > .active > a:hover {
  background-color: #000;
  color: #fff;
}
.navbar {
  margin-bottom: 0;
}
.navbar-brand {
  padding: 0 15px;
}
@media (min-width: 992px) {
  .navbar > .container {
    padding: 0;
  }
  .navbar-brand {
    margin-left: 0 !important;
  }
  .navbar-header {
    margin-right: 15px !important;
    width: 16.66666667%; /* width of .col-md-2 */
  }
  .navbar-header img {
    height: auto;
    max-width: 100%;
  }
}

section .row { margin-bottom: 50px; }
section .row > div > div { height: 50px; }
.green  { background: green;  }
.blue   { background: blue;   }
.red    { background: red;    }
.silver { background: silver; }

<header class="header-main">
  <nav class="navbar navbar-default navbar-static-top nav-izbornik"   role="navigation">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#" title="Test centar">  
          <img src="//dummyimage.com/225x200/000/fff" alt="" class="hidden-xs hidden-sm logo-borderi">
          <img src="//dummyimage.com/50x50/000/fff" alt="" class="hidden-md hidden-lg logo-za-manje">
        </a>        
      </div><!--.navbar-header-->    
    
      <div class="collapse navbar-collapse navbar-responsive-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Item 01</a></li>
          <li><a href="#">Item 02</a></li>
          <li><a href="#">Item 03</a></li>
          <li><a href="#">Item 04</a></li>
          <li><a href="#">Item 05</a></li>
          <li><a href="#">Item 06</a></li>
        </ul>      
      </div><!--nav-collapse -->    
    </div><!--container-->
  </nav>  
</header>

<section>
  <div class="container">
    <div class="row">
      <div class="col-md-offset-2 col-md-7"><div class="red"></div></div>
      <div class="col-md-3"><div class="blue"></div></div>
    </div>
    <div class="row">
      <div class="col-md-2"><div class="silver"></div></div>
      <div class="col-md-10"><div class="green"></div></div>
    </div>
  </div><!--container-->
</section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Bootstrap col-md becomes larger because of absolute position of div inside

2 Answers2