CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Adrian
Adrian

Reputation: 1002

Bootstrap horizontal dropdown menu aligned to right

I had problem with aligning my horizontal drop down menu to right side of row container. It is because I have position:fixed in my css but it is only way to style this type of menu.

Here is my css:

.top-main .dropdown-menu {
  width: 100%;
  position: fixed;
  top: 87px;
  z-index: 1000;
  text-align: right;
  padding: 5px 0;
  margin: 0 auto;
}

And whole menu you can see here: http://www.bootply.com/mNP0ficFef

As you can see the menu is aligned to right side of monitor, but it should be aligned to right side of row. Any suggestions?

Upvotes: 0

Views: 1306

Answers (2)

Ilia Ross
Ilia Ross

Reputation: 13414

Use inbuilt pull-right class on:

<nav class="navbar navbar-default navbar-static-top pull-right" role="navigation">
   /* content */
</nav>

Example

Upvotes: 0

ElwoodP
ElwoodP

Reputation: 428

If I understand your requirements correctly, all you have to do is set up a container within your dropdown:

<ul class="dropdown-menu">
  <ul class="list-inline container">
    <li><a href="#" id="">Link 1.1</a></li>
    <li><a href="#" id="">Link 1.2</a></li>
    <li><a href="#" id="">Link 1.3</a></li>
    <li><a href="#" id="">Link 1.5</a></li>
  </ul>
</ul>

Example: http://www.bootply.com/Pu3P6c2nlO

Upvotes: 1

Related Questions