Twitter Bootstrap Question posted in

Fix navigation menu drop-down box position-Twitter bootstrap

I have some problem with position of drop-down box. When i click on navigation menu item sub menu drop-down box open in wrong place on top-right corner of screen while it most open below of the parent item.
You Can see preview of this problem on the below image.

sub menu position problem

codes I have written are these: 

body {
  direction: rtl;
}

.dropdown-menu li>a:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
}

#top {
  background-color: #eee;
  font-size: 12px;
  padding: .8em 0 1em 0;
  border-bottom: 1px solid #e2e2e2;
  min-height: 40px;
}

#top .container {
  padding: 0 20px;
}

#top .btn-link,
#top-links li,
.top-links a {
  color: #888;
  text-shadow: 0 1px 0 #FFF;
  text-decoration: none;
}

#top .btn-link:hover,
.top-links a:hover {
  color: #444;
}

.top-links .dropdown-menu {
  top: 0;
}

.top-links .dropdown-menu a {
  text-shadow: none;
}

.top-links .dropdown-menu a:hover {
  color: #FFF;
}

#top .btn-link strong {
  font-size: 14px;
  line-height: 14px;
}

.top-links {
  padding-top: 6px;
}

.top-links a+a {
  margin-right: 15px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="top">
  <div class="container">
    <div id="top-nav-right-items" class="pull-right top-links">
      <ul class="list-inline">

        <li><a href="">صفحه نخست</a></li>
        <li><a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-external-link-square"></i> <span class="hidden-xs hidden-sm hidden-md">حساب کاربری</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a target="_blank" title="" href="">آیتم 1</a></li>
            <li><a target="_blank" title="" href="">آیتم 2</a></li>
            <li><a target="_blank" title="" href="">آیتم 3</a></li>
          </ul>
        </li>
        <li><a href="">سبد خرید</a></li>
        <li><a href="">تسویه حساب</a></li>
        <li><a href="">درباره ما</a></li>
        <li><a href="">تماس با ما</a></li>

      </ul>
    </div>
    <!-- #top-nav-right-items -->

  </div>
  <!-- container -->
</nav>

How i can fix this problem? Thank you.

Tags:

2

Answers


  1. 0

    You havn’t given dropdown parent position:relative so dropdown stay within its area. Also, give dropdown top:40px to make sure it opens below navbar

    Working Demo

    Login or Signup to reply.
  2. 0

    Simply add position:relative to its parent so that the dropdown is positionned relatively to its parent. Then you may adjust the top value also if needed.

    body {
  direction: rtl;
}

.dropdown-menu li>a:hover {
  text-decoration: none;
  color: #ffffff;
  background-color: #229ac8;
  background-image: linear-gradient(to bottom, #23a1d1, #1f90bb);
  background-repeat: repeat-x;
}

#top {
  background-color: #eee;
  font-size: 12px;
  padding: .8em 0 1em 0;
  border-bottom: 1px solid #e2e2e2;
  min-height: 40px;
}

#top .container {
  padding: 0 20px;
}

#top .btn-link,
#top-links li,
.top-links a {
  color: #888;
  text-shadow: 0 1px 0 #FFF;
  text-decoration: none;
}
/* Added this code*/
.list-inline li {
  position: relative;
}
/**/

#top .btn-link:hover,
.top-links a:hover {
  color: #444;
}

.top-links .dropdown-menu {
  top: 30px;
}

.top-links .dropdown-menu a {
  text-shadow: none;
}

.top-links .dropdown-menu a:hover {
  color: #FFF;
}

#top .btn-link strong {
  font-size: 14px;
  line-height: 14px;
}

.top-links {
  padding-top: 6px;
}

.top-links a+a {
  margin-right: 15px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav id="top">
  <div class="container">
    <div id="top-nav-right-items" class="pull-right top-links">
      <ul class="list-inline">

        <li><a href="">صفحه نخست</a></li>
        <li><a href="" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-external-link-square"></i> <span class="hidden-xs hidden-sm hidden-md">حساب کاربری</span> <span class="caret"></span></a>
          <ul class="dropdown-menu dropdown-menu-right">
            <li><a target="_blank" title="" href="">آیتم 1</a></li>
            <li><a target="_blank" title="" href="">آیتم 2</a></li>
            <li><a target="_blank" title="" href="">آیتم 3</a></li>
          </ul>
        </li>
        <li><a href="">سبد خرید</a></li>
        <li><a href="">تسویه حساب</a></li>
        <li><a href="">درباره ما</a></li>
        <li><a href="">تماس با ما</a></li>

      </ul>
    </div>
    <!-- #top-nav-right-items -->

  </div>
  <!-- container -->
</nav>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search