Struggled with implementing the horizontal 'Navbar' feature in Bootstrap

Question

Struggled with implementing the horizontal 'Navbar' feature in Bootstrap

Can anyone help me make this bootstrap 'Navbar' align properly? I've tried using different navbar classes without success. Here is a snapshot of the web-page for reference: web-page snapshot

    <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <meta charset="utf-8">
    <title>>Bootstrap Practice</title>

  </head>
  <body>

<!-- Navbars -->
    <nav class="navbar navbar-default">

      <div class="container">
        <div class="navbar-header">
         <a href="https://www.youtube.com/user/ColdplayVEVO" class="navbar-brand">Coldplay</a>
       </div>

       <ul class="nav navbar-nav">
         <li> <a href="">Albums</a> </li>
         <li> <a href="#">Awards</a> </li>
         <li> <a href="#">Legacy</a> </li>
         <li> <a href="#">About</a> </li>
       </ul>

      </div>

     </nav>
  </body>
</html>

css bootstrap-4 web-frontend

Answer 1

Answer №1

By default, the navbar-nav's behavior is set to:

flex-direction: column;

To change this, add a class in the html:

<ul class="nav navbar-nav navigation-bar-row">
    <li> <a href="">Albums</a> </li>
    <li> <a href="#">Awards</a> </li>
    <li> <a href="#">Legacy</a> </li>
    <li> <a href="#">About</a> </li>
</ul>

Then, update your CSS accordingly:

.navigation-bar-row {
    flex-direction: row;
}

If you want a quick solution without all the extra steps, you can simply do this:

<ul class="nav navbar-nav" style="flex-direction: row;">
    <li> <a href="">Albums</a> </li>
    <li> <a href="#">Awards</a> </li>
    <li> <a href="#">Legacy</a> </li>
    <li> <a href="#">About</a> </li>
</ul>

Edit: The commenter below suggests adding "d-flex flew-row" to the ul class list for an even better solution.

Answer 2

By default, the navbar-nav's behavior is set to:

flex-direction: column;

To change this, add a class in the html:

<ul class="nav navbar-nav navigation-bar-row">
    <li> <a href="">Albums</a> </li>
    <li> <a href="#">Awards</a> </li>
    <li> <a href="#">Legacy</a> </li>
    <li> <a href="#">About</a> </li>
</ul>

Then, update your CSS accordingly:

.navigation-bar-row {
    flex-direction: row;
}

If you want a quick solution without all the extra steps, you can simply do this:

<ul class="nav navbar-nav" style="flex-direction: row;">
    <li> <a href="">Albums</a> </li>
    <li> <a href="#">Awards</a> </li>
    <li> <a href="#">Legacy</a> </li>
    <li> <a href="#">About</a> </li>
</ul>

Edit: The commenter below suggests adding "d-flex flew-row" to the ul class list for an even better solution.

Answer 3

Answer №2

If you're looking to create a Navbar using Bootstrap, the Bootstrap Navbar documentation provides a ready-to-use example that you can simply copy and paste into your project.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 4

If you're looking to create a Navbar using Bootstrap, the Bootstrap Navbar documentation provides a ready-to-use example that you can simply copy and paste into your project.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

Answer 5

Answer №3

In Bootstrap 4, there are specific classes available to convert a 'horizontal' navigation bar into a vertical one while maintaining a straight appearance.

(function(){
var menuToggle = $('#menu-toggle');
menuToggle.click(function(){
menuToggle.next().toggleClass('d-sm-block');
menuToggle.next().toggleClass('d-none');
});
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-light">
<!-- PUT A BUTTON HERE THAT ON CLICK WILL SHOW HIDE THE NAV -->
<button id="menu-toggle" class="d-block d-md-none">Menu *burger icon*</button>
<ul class="navbar-nav d-none d-md-inline-flex">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>

You can also add a button to toggle the navigation bar using Bootstrap classes for easy implementation.

Due to time constraints, this is as far as I could get with the code.

Answer 6

In Bootstrap 4, there are specific classes available to convert a 'horizontal' navigation bar into a vertical one while maintaining a straight appearance.

(function(){
var menuToggle = $('#menu-toggle');
menuToggle.click(function(){
menuToggle.next().toggleClass('d-sm-block');
menuToggle.next().toggleClass('d-none');
});
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm bg-light">
<!-- PUT A BUTTON HERE THAT ON CLICK WILL SHOW HIDE THE NAV -->
<button id="menu-toggle" class="d-block d-md-none">Menu *burger icon*</button>
<ul class="navbar-nav d-none d-md-inline-flex">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
<br>

<div class="container-fluid">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
<p>The navbar-expand-xl|lg|md|sm class determines when the navbar should stack vertically (on extra large, large, medium or small screens).</p>
</div>

You can also add a button to toggle the navigation bar using Bootstrap classes for easy implementation.

Due to time constraints, this is as far as I could get with the code.

Struggled with implementing the horizontal 'Navbar' feature in Bootstrap

Answer №1

Answer №2

Answer №3

Similar questions

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Is there a way to modify the styling for ListItemButton specifically when it is in a selected state?

Is it possible to disable the pointer event on the parent element only in CSS

Why are my div elements mysteriously adding bottom margin?

Allow the table headers to be flexible and accommodate extended names in the rows

The issue with the data backdrop not functioning properly in Angular 6 is ongoing and

Ensuring image stays centered always

JavaScript array with more than 4 elements

Ways to dynamically update a div with data from a JSON response

Difficulty in centering certain elements using Bootstrap

The overflow:scroll property fails to function properly after I insert additional content into the div

Adding pictures to the background image

Having issues with vertical space distribution in flexbox column layout

Adjusting the color of an HTML slider button as it moves

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

Tips on achieving consistent division through CSS where both columns and rows have equal spacing

In an environment with Internet Explorer 8, is it possible to use CSS web fonts in the WOFF file format?

Guide to creating a search bar that scans the text inside an external .txt file

The footer is being covered by the section, despite my attempts to address the issue with

How can I achieve a stylish alternating bottom-border effect for my website navigation menu?