What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

Question

What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

This question may seem like a duplicate, but it is not. I am specifically asking about Bootstrap version 4.3 and not any earlier versions. The answers I have found so far are either

not applicable to the current version (useless for updated projects), or
based on heavily customized Bootstrap (not easily reproducible).

I am currently tasked with customizing Bootstrap, so my question is: How can I center the navbar-brand link within a Bootstrap 4 navbar?

Here is a basic example of a navbar from the Bootstrap 4.3 documentation, which is the latest version as of now:

<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">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

Some sources recommend adding the CSS class mx-auto to the navbar-brand link, but this does not work in my case.

While I'm at it, does anyone know how to keep the burger menu always visible, so the menu never expands? (This is an additional query, and I will accept responses that do not directly address this as well.)

html css twitter-bootstrap bootstrap-4

Answer 1

Answer №1

How can I center the navbar-brand link in a Bootstrap 4 (!) navbar?

One method is to use absolute positioning.

Here's an example:

.navbar {
  position: relative;
}

a.navbar-brand{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%);
}

Check out the demo here: https://jsfiddle.net/ytjhew9u/4/

How do I keep the burger menu always visible?

If you want the burger menu to be constantly displayed, you should remove the class navbar-expand-lg from the navbar element.

See the demo here: https://jsfiddle.net/ytjhew9u/2/

Answer 2

How can I center the navbar-brand link in a Bootstrap 4 (!) navbar?

One method is to use absolute positioning.

Here's an example:

.navbar {
  position: relative;
}

a.navbar-brand{
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translate(-50%);
}

Check out the demo here: https://jsfiddle.net/ytjhew9u/4/

How do I keep the burger menu always visible?

If you want the burger menu to be constantly displayed, you should remove the class navbar-expand-lg from the navbar element.

See the demo here: https://jsfiddle.net/ytjhew9u/2/

Answer 3

Answer №2

If you want the hamburger menu to always show while centering the nav-brand, follow these steps:

Remove the .navbar-toggler class to move the hamburger back to the left.

The HTML code:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  <nav class="navbar fixed-top navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#myAlert" data-toggle="collapse">Wow</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
            </li>
        </ul>
    </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS styling:

.navbar {
    position: relative;
    min-height: 56px;
}
.navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

.navbar-toggler{
  position: absolute;
  right: 20px;
}

Answer 4

If you want the hamburger menu to always show while centering the nav-brand, follow these steps:

Remove the .navbar-toggler class to move the hamburger back to the left.

The HTML code:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

  <nav class="navbar fixed-top navbar-dark bg-dark">
   <a class="navbar-brand" href="#">Navbar</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">Home</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#features">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#myAlert" data-toggle="collapse">Wow</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="" data-target="#myModal" data-toggle="modal">About</a>
            </li>
        </ul>
    </div>
</nav>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS styling:

.navbar {
    position: relative;
    min-height: 56px;
}
.navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px !important;  /* 50% of your logo width */
    display: block;
}

.navbar-toggler{
  position: absolute;
  right: 20px;
}

What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

Answer №1

Answer №2

Similar questions

Is there a way to create a hover effect on an input number field within a certain class, causing the -webkit-inner-spin-button opacity to change to 1?

Is there a way to automatically calculate the sum of two boxes and display the result in a separate

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

Mixin for conditional input styles in Sass

Comparing Django forms to conventional forms

Instructions for selecting an <option> within a <select> element using Python

Javascript function failing to execute upon page load

Button Click Does Not Trigger Bootstrap Modal Display

Struggling to eliminate unwanted space with CSS styling

Clicking on the dropdown in Bootstrap 4 will cause the arrow to toggle

What is causing the divs to stack vertically instead of aligning horizontally?

Can CSS be utilized to define the dimensions and background of a <div>?

PHP and Ajax do not $_POST the selected option value in <select>

firefox compatibility issues with jquery ajax

Adding CSS properties to an image within the ImageResourceCell of a CellTable

Enhancing web pages with a touch of JSP glow

Noticed a peculiar outcome when working with hexadecimal calculations in LESS. What could be causing this phenomenon?

Switching on click using jQuery

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Display a bootstrap toast using a JavaScript class method