1

I'm working with Bootstrap 4.1 and I am making a Navbar with seven menu items. I want to right justify three of the seven menu items, but I'm not sure just how to code that. Here is one method I tried (but it's not working):

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container-fluid">
      <div class="navbar-header"></div>
   </div>
</div>

    <!-- Navigation Bar -->

    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

      <div class="container-fluid">
        <div class="row" >

        <a class="navbar-brand" href="#">MyNNS</a>
       
        <!-- 'Hamburger' - Shown When Menu is on Small Width Screen -->
        
        <button class="navbar-toggler collapsed" aria-expanded="false" aria-controls="navbar" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbar">
             <span class="navbar-toggler-icon"></span> 
        </button>

      <!-- Navigation Bar Menu Items -->

        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav mr-auto">
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Departments" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Departments</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Resources" data-toggle="modal" data-target="#MyNNSModal"  onclick="showResourceHeader()">Resources</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Procedures" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Procedures</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="News" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">News</a></li> 
          </ul>
        </div>
              
        <div class="d-flex align-self-end">
          <ul class="navbar-nav ml-auto">             
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Newsfeed" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Newsfeed</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="OneDrive" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">OneDrive</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Sites" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Sites</a></li>
          </ul>
        </div>    

        </div> 
      </div>
    </nav>

In addition to align-self-end I also tried justify-content-end and navbar-right.

My JSFiddle Code Example is here: https://jsfiddle.net/tsmolskow/aq9Laaew/283001/

Yosef
  • 77
  • 2
  • 14
  • 1
    you need to use css. https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Carol McKay Nov 30 '18 at 00:32
  • @Carol - I looked at your page, but I don't see a way to have left and right justified items in the same
    – Yosef Nov 30 '18 at 00:55
  • 1
    This a duplicate of: https://stackoverflow.com/questions/41513463/bootstrap-4-align-navbar-items-to-the-right Make sure your following the [correct Navbar structure](http://getbootstrap.com/docs/4.1/components/navbar/) as show in the docs.`row` is not used in the Navbar. https://www.codeply.com/go/mBHDCZDkmE – Carol Skelly Nov 30 '18 at 07:35

1 Answers1

2

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#There_is_no_justify-self_in_Flexbox

quote: "There is no justify-self in Flexbox"

we need to use auto margins: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#Alignment_and_auto_margins

<!-- Navigation Bar Menu Items -->

        <div class="navbar-collapse collapse" id="navbar">
          <ul class="nav navbar-nav mr-auto">
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Departments" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Departments</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Resources" data-toggle="modal" data-target="#MyNNSModal"  onclick="showResourceHeader()">Resources</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Procedures" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Procedures</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="News" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">News</a></li> 
<!--   just one list --   </ul>
        </div>

        <div class="d-flex align-self-end">
          <ul class="navbar-nav ml-auto">              -->
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Newsfeed" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Newsfeed</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="OneDrive" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">OneDrive</a></li>
            <li class="nav-item"> 
               <a class="nav-link menuItemHover active" id="Sites" data-toggle="modal" data-target="#MyNNSModal" onclick="hideResourceHeader()">Sites</a></li>
          </ul>
        </div>

css:

.navbar-nav
{
  display:flex;
/*   justify-content:space-between; -- doesn't work when we want to achieve left / right layout */
  width:900px;
  padding-left:0; /* override browser style */
  list-style-type:none;
  background:pink;
}

/* push last three menu items to the right */
.nav-item:nth-of-type(5)
{
  margin-left:auto;
}

/* give the other menu items apart from the first menu item a left margin to space them out */
.nav-item:not(:nth-of-type(5)):not(:nth-of-type(1))
{
  margin-left:2em;
}

demo: https://codepen.io/carolmckayau/pen/pQqJZp

Carol McKay
  • 2,438
  • 1
  • 15
  • 15