0

I am having issues with getting the items to the right. I got my brand on the left side and whatever i try. I can't get the items to the right side of the navbar.They stay hugging to the left side.

This is my code:

 <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavCollapse" aria-controls="NavCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="NavCollapse">
      <a class="navbar-brand ms-10" href="#">
      <img src="logo.png" class="img-fluid">
      </a>
    
    <ul class="navbar-nav">
       <li class="nav-item active">
       <a class="nav-link menutext active" href="index.php">Home</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="articles.php">Articles</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="games.php">Games</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">NG Boiler Room</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Catch Me Live</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="events.php">Event Calendar</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Gallery</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Projects</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="credits.php">Credits</a>
       </li>
    </ul>
    
      </div>
      </div>
    </nav>

I have atm no clue, what i did wrong there. Did i messed something up or do i miss something in the code?

Jos Den Hertog
  • 11
  • 3
  • See if this helps : https://stackoverflow.com/questions/41711978/bootstrap-4-moving-links-to-the-right-of-the-navbar-with-a-toggle-button – Nish007 Jun 05 '21 at 16:24
  • @Nish007 thx for you advice, will check that i can find something, If not, thx for your answer :) – Jos Den Hertog Jun 05 '21 at 16:48

2 Answers2

0

Since you'd like to align the entire navigation to the right side of the navbar, you can simply add an empty div with a margin-right of auto right before the nav link section, which will push the navigation to the right side.

<div class="me-auto"></div>

In your original navbar code, this implementation would look like:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#NavCollapse" aria-controls="NavCollapse" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="NavCollapse">
      <a class="navbar-brand ms-10" href="#">
      <img src="logo.png" class="img-fluid">
      </a>

    <div class="me-auto"></div>
    
    <ul class="navbar-nav">
       <li class="nav-item active">
       <a class="nav-link menutext active" href="index.php">Home</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="articles.php">Articles</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="games.php">Games</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">NG Boiler Room</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Catch Me Live</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="events.php">Event Calendar</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Gallery</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext disabled" href="#">Projects</a>
       </li>
       <li class="nav-item">
       <a class="nav-link menutext" href="credits.php">Credits</a>
       </li>
    </ul>
    
      </div>
      </div>
    </nav>

For more information and to read up on detailed implementation, check out the Bootstrap documentation on navbars:

https://getbootstrap.com/docs/5.0/components/navbar/

Austin
  • 97
  • 1
  • 6
  • Your solution worked as a charm, if i could made 2 accepted answers then yours will be the second. Thx for providing an easy fast fix. – Jos Den Hertog Jun 05 '21 at 17:00
0

Bootstrap comes packaged with several flexbox utility classes that can be used here.

Since the .navbar-collapse class is set to be display: flex and there are only 2 children within this element, we can add the .justify-content-between class to force the 2 children to sit on opposite ends.

<div class="collapse navbar-collapse justify-content-between" id="NavCollapse">

Alternatively, if the .navbar-collapse element will have more than 2 children, you can place the .ml-auto utility on the ul element to force it to sit on the right.

<ul class="navbar-nav ml-auto">

Documentation: Bootstrap flex utilities

tiffachoo
  • 131
  • 3