A dual row navigation layout with the second row featuring equally distributed elements in a neat and organized manner

Question

A dual row navigation layout with the second row featuring equally distributed elements in a neat and organized manner

Looking to create a responsive collapsible navigation with two rows. The first row should contain the logo and language selector, while the second row should have the main links:

|                                                             |
|                             LOGO          lang              |
|        link1        link2         link3        link4        |

Check out the progress so far on JSFiddle

I'm having trouble getting the main links to have equal width and be distributed horizontally evenly on larger viewports. The links are currently stacked very tightly.

Here is the code for the second row navigation:

<ul class="navbar-nav nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link" href="#">Home</a>
  </li>    
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
      Categories
    </a>
    <div class="dropdown-menu">
      <a class="dropdown-item">Cat 1</a>
      <a class="dropdown-item">Cat 2</a>
      <a class="dropdown-item">Cat 3</a>
      <a class="dropdown-item">Cat 4</a>
    </div>
  </li>

  <li class="nav-item">
    <a class="nav-link" href="#">Live Auction</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Contact us</a>
  </li>
</ul>

Does anyone have any suggestions on how to override the classes or provide another solution? Thank you!

html css twitter-bootstrap bootstrap-4 flexbox

Answer 1

Answer №1

To ensure that your flex items (li) adjust to the content, set the initial size by changing flex-basis from 0 to auto. In Bootstrap 4, you can achieve this by using the flex-fill class. Include it in your HTML:

<li class="nav-item flex-fill">
    <a class="nav-link" href="#">Live Auction</a>
</li>

Alternatively, you can specify this property in your CSS:

.nav-justified li.nav-item {
    /* ... */
    flex-basis: auto;
}

Check out this demo for reference: https://jsfiddle.net/wcj1gzr5/1/

If you want to distribute flex items with an effect similar to justify-content: space-between, make sure the div and ul containing the flex items expand their width. This allows enough space for the flex items to be evenly distributed. Add min-width: 100%; to both elements to fill their container, then use justify-content on the ul for spacing & positioning control.

Test out this functionality in the live demo here: https://jsfiddle.net/wcj1gzr5/2/

Answer 2

To ensure that your flex items (li) adjust to the content, set the initial size by changing flex-basis from 0 to auto. In Bootstrap 4, you can achieve this by using the flex-fill class. Include it in your HTML:

<li class="nav-item flex-fill">
    <a class="nav-link" href="#">Live Auction</a>
</li>

Alternatively, you can specify this property in your CSS:

.nav-justified li.nav-item {
    /* ... */
    flex-basis: auto;
}

Check out this demo for reference: https://jsfiddle.net/wcj1gzr5/1/

If you want to distribute flex items with an effect similar to justify-content: space-between, make sure the div and ul containing the flex items expand their width. This allows enough space for the flex items to be evenly distributed. Add min-width: 100%; to both elements to fill their container, then use justify-content on the ul for spacing & positioning control.

Test out this functionality in the live demo here: https://jsfiddle.net/wcj1gzr5/2/

Answer 3

Answer №2

To achieve this effect, simply insert width:100% into the styles for both .navbar-collapse and .nav-pills. See the code snippet below for reference:

<!DOCTYPE html>
<html lang="en>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .navbar-collapse,
    .nav-pills {
      width: 100% !important;
    }
    
    header {
      width: 100%;
      background: #282828;
      background-position-x: 0%;
      background-position-y: 0%;
      background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
      background-size: cover;
      background-position: center;
    }
    /* center the logo */
    
    .navbar {
      justify-content: center;
    }
    /* in order to center the logo */
    
    .navbar .navbar-toggler {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
    }
    /* center all navbar items */
    
    .navbar-nav {
      align-items: center;
    }
    /* since it's expanding at lg */
    
    @media (min-width: 992px) {
      /* in order to display in 2 rows */
      .navbar-expand-lg {
        flex-flow: column nowrap;
      }
      /* same logic as the navbar-toggler above */
      .navbar-nav.upper-controls {
        position: absolute;
        right: 1rem;
        top: 0.5rem;
        font-size: 85%;
      }
    }
  </style>
</head>

<body>

  <header>
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg navbar-light">
            <a href="#" class="navbar-brand">
                            CompanyLogo
                        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
                            <span class="navbar-toggler-icon"></span>
                        </button>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav upper-controls">
                <li class="nav-item">
                  <a class="nav-link" href="#">Language</a>
                </li>
              </ul>
              <ul class="navbar-nav nav nav-pills nav-justified">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        Categories
                                    </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item">Cat 1</a>
                    <a class="dropdown-item">Cat 2</a>
                    <a class="dropdown-item">Cat 3</a>
                    <a class="dropdown-item">Cat 4</a>
                  </div>
                </li>

                <li class="nav-item">
                  <a class="nav-link" href="#">Live Auction</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>


</body>

</html>

Answer 4

To achieve this effect, simply insert width:100% into the styles for both .navbar-collapse and .nav-pills. See the code snippet below for reference:

<!DOCTYPE html>
<html lang="en>

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
    .navbar-collapse,
    .nav-pills {
      width: 100% !important;
    }
    
    header {
      width: 100%;
      background: #282828;
      background-position-x: 0%;
      background-position-y: 0%;
      background-image: url("https://cdn.wallpapersafari.com/65/40/cJtjUm.jpg");
      background-size: cover;
      background-position: center;
    }
    /* center the logo */
    
    .navbar {
      justify-content: center;
    }
    /* in order to center the logo */
    
    .navbar .navbar-toggler {
      position: absolute;
      right: 1rem;
      top: 0.5rem;
    }
    /* center all navbar items */
    
    .navbar-nav {
      align-items: center;
    }
    /* since it's expanding at lg */
    
    @media (min-width: 992px) {
      /* in order to display in 2 rows */
      .navbar-expand-lg {
        flex-flow: column nowrap;
      }
      /* same logic as the navbar-toggler above */
      .navbar-nav.upper-controls {
        position: absolute;
        right: 1rem;
        top: 0.5rem;
        font-size: 85%;
      }
    }
  </style>
</head>

<body>

  <header>
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg navbar-light">
            <a href="#" class="navbar-brand">
                            CompanyLogo
                        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".collapse">
                            <span class="navbar-toggler-icon"></span>
                        </button>
            <div class="collapse navbar-collapse">
              <ul class="navbar-nav upper-controls">
                <li class="nav-item">
                  <a class="nav-link" href="#">Language</a>
                </li>
              </ul>
              <ul class="navbar-nav nav nav-pills nav-justified">
                <li class="nav-item">
                  <a class="nav-link" href="#">Home</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                                        Categories
                                    </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item">Cat 1</a>
                    <a class="dropdown-item">Cat 2</a>
                    <a class="dropdown-item">Cat 3</a>
                    <a class="dropdown-item">Cat 4</a>
                  </div>
                </li>

                <li class="nav-item">
                  <a class="nav-link" href="#">Live Auction</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Contact us</a>
                </li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </header>


</body>

</html>

A dual row navigation layout with the second row featuring equally distributed elements in a neat and organized manner

Answer №1

Answer №2

Similar questions

Eliminating the border around a textarea in HTML

Creating a 3-column grid in React using the map function is a simple and efficient way

I need assistance with retrieving an image from a database using PHP

Leveraging the power of Bootstrap 4 to place the footer beneath all remaining content on the

What steps can I take to whitelist the necessary components for BootstrapVue in order to successfully integrate Purgecss with Nuxt.js?

Is it possible to incorporate MUI React components within an iframe?

Turn off the perpetual active mode

Having trouble with my form validation for a university project. Not sure if it's a problem with the JavaScript or HTML

Bootstrap doesn't display in the dropdown menu

Encountering an issue with Nuxt 3.5.1 during the build process: "ERROR Cannot read properties of undefined (reading 'sys') (x4)"

Dynamically insert a new row into an HTML table using AJAX and refresh the table with .load method

What is the process to showcase a database value in a particular index of an HTML table?

Applying a translucent layer of color to a jpeg image to create a subtle background effect

Creating a div overlay triggered by the addition of a child tag

Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

Is there a way to retrieve all CSS styles associated with a specific element?

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Problem arising from animation not commencing at expected starting point

Displaying dynamic content in JavaScript using Galleria module

Assign a CSS class to a DIV depending on the vertical position of the cursor