Question

Hello I have this trouble: I have two sections in my header, but when I put dropdown not into nav-section it craches my header like that:

If I use absolute position my dropdown will be moving out of div and look different on different monitors.

Maybe I don’t explain well, so I will give picture what I want to have:

and nav section below.

Here is my HTML:

<div class="container">

<div class="navbar ">


 <div class="container">

    <div class="top">
        <div class="img">
          <a href="#" id="facebook" title="facebook"></a>

          <a href="#" id="linkedin" title="linkedin"></a>

          <a href="#" id="youtube" title="youtube"></a>
        </div>


          <ul class="nav nav-pills">
      <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">[e-mail]
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" style="display: none; ">
                <li><a href="/users/edit.6">My Account</a></li>

                <li><a href="/users/edit.6">Settings</a></li>

                <li><a href="/users/edit.6">Analytics</a></li>

                <li><a href="/users/sign_out" data-method="delete" rel="nofollow">Sign out</a></li>
              </ul>
            </li>   
          </ul>
        </div>
    </div>
    <div class="white_line"></div>
    <div class="grey_line"></div>              
   <ul class="nav pull-left">
      <li><a href="/">Home</a></li>
      <li><a href="/what_we_do">What we do</a></li>
      <li><a href="#">My account</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </div>

and my CSS:

   .navbar .nav {
background-color: #f2f2f2;
float: left;
}

      .navbar .nav > li {
  padding-top: 0px;
   }

.navbar-inner{
padding:0px;
width:960px;
}

.navbar .nav > li > a{
 padding: 28px 25px 10px 0px;
}

 .navbar .nav-pills > li > a{
 padding-top:22px;
 }
 //top - top class with icons

.top{
height: 35px;
background: #c7dbaa;
}
.top .img:first-child{
 margin-bottom:1px;
 }
 .top .img{
 display:inline-block;
 padding: 5px 0 0 5px;
 }
.nav-pills{
 //here I need to change positioning or something like that
 }

Answer 1

<div class="top row">
        <div class="img">
          <a href="#" id="facebook" title="facebook"></a>

          <a href="#" id="linkedin" title="linkedin"></a>

          <a href="#" id="youtube" title="youtube"></a>
        </div>

see you need to add row on your class=”top row” so that your menu will come up on navigation.Then you need to remove the color and all stuff