Align the last-child li item to the right

Question

I'm trying to float the last-child item to the right using float:right but it's not happening. Could someone help?

The CSS seems to be loading as it should but because of the flex being used in bootstrap 4, it is creating problem and not getting the desired result.

JSFiddle Demo: https://jsfiddle.net/jbthz8L3/

<div id="main-nav" class="justify-content-end">
  <ul id="menu-main-menu" class="navbar-nav">
    <li class="menu-item current-menu-item current_page_item menu-item-home active nav-item"><a href="#" class="nav-link">Main Menu 1</a>
    </li>
    <li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link">Main Menu 2</a>
      <ul class="dropdown-menu" role="menu">
        <li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" class="dropdown-item">Menu 1</a>
          <ul class="dropdown-menu" role="menu">
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 1</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 2</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 3</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 4</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 5</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 6</a></li>
          </ul>
        </li>
        <li class="menu-item menu-item-has-children dropdown nav-item"><a href="#" class="dropdown-item">Menu 2</a>
          <ul class="dropdown-menu" role="menu">
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 11</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 12</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 13</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 14</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 15</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 16</a></li>
            <li class="menu-item nav-item"><a href="#" class="dropdown-item">Sub Menu 17</a></li>
          </ul>
        </li>
        <li class="menu-item nav-item"><a href="#" class="dropdown-item">Menu 3</a>
        </li>
      </ul>
    </li>
    <li class="menu-item nav-item"><a href="#" class="nav-link">Main Menu 3</a></li>
    <li class="menu-item nav-item"><a href="#" class="nav-link">Main Menu 4</a></li>
  </ul>
</div>

CSS:

.navbar-nav {
    -ms-flex-direction: row;
    flex-direction: row;
}
.navbar-nav .dropdown-menu {
    position: absolute;
}
.navbar-nav > li:last-child {
   float: right;
}
.navbar-nav > li {
  margin: 0 15px;
}
.dropdown-menu .dropdown-toggle::after {
  border-bottom: 0.3em solid transparent;
  border-left: 0.3em solid;
  border-top: 0.3em solid transparent;
}
.dropdown-menu.show {
  border: 1px solid #999;
  background-color: #ffffff;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children {
    position: unset;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.11);
    background-color: #ffffff;
    border: 1px solid #999;
}
.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>.dropdown-menu {
    display: block;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children:hover>a:after {
    border-left-color: #fff;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left {
    float: none;
}

.dropdown.menu-item-has-children .dropdown.menu-item-has-children.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

How's this a duplicate of that question? It's very different. — Elaine Byene, Oct 31 '19 at 11:30
It is indeed a duplicate of that question, as you can try to just add `ml-auto` which means `margin-left: auto;` to your class which contains *Main Menu 4*. — Dhaval Jardosh, Oct 31 '19 at 20:35
`margin-left: auto;` doesn't work. Try it and see for yourself. — Elaine Byene, Nov 01 '19 at 09:14

score 2 · Answer 1 · answered Oct 31 '19 at 07:10

2

Change float:right; with margin-left:auto;.

answered Oct 31 '19 at 07:10

Dhaval Jardosh

7,151
5
27
69

score 2 · Accepted Answer · answered Oct 31 '19 at 07:11

2

Change float: right; to

right: 0;
position: absolute;

answered Oct 31 '19 at 07:11

Max Voisard

1,685
1
8
18

Awesome! Got this working. Thank you so much! I'll accept the answer in 3 minutes. – Elaine Byene Oct 31 '19 at 07:15

score 2 · Answer 3 · answered Oct 31 '19 at 07:14

2

Change the float:right to margin-left: auto;

answered Oct 31 '19 at 07:14

Icewine

1,851
1
12
22

Thanks. I got it working with Max's solution. Somehow this isn't working. – Elaine Byene Oct 31 '19 at 07:15
@Icewine Dhaval Jardosh had the same answer before you, so I would delete your answer. – Max Voisard Oct 31 '19 at 07:17
Margin left auto works as expected: https://jsfiddle.net/6rc1fxbL/ – Carol Skelly Oct 31 '19 at 11:16

score 1 · Answer 4 · answered Oct 31 '19 at 07:16

1

One of the options:

right: 0;
position: absolute;

Maybe there are some pre-defined bootstrap-specific classes to solve it in a different way.

answered Oct 31 '19 at 07:16

AdamKniec

1,607
9
25

Align the last-child li item to the right

4 Answers4