Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

Question

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

I'm working on setting up a navbar with three elements. I want to have a left-aligned brand, a group of right-aligned links that will collapse on smaller screens, and an additional button that stays visible at all times.

To achieve the alignment of the button and links, I used the ml-auto class. This worked well on mobile devices (see 1st image), but on desktops, the button ends up above the links (as shown in the 2nd image). I attempted to use the btn-group class, but the button ended up merging with the links, which didn't look right (3rd image).

How can I ensure proper horizontal alignment of these elements?

I should mention that I do not want the button to be grouped with the other right links. I want it to remain visible even on small screens. While I've come across similar questions on SO, they all involve placing the right-aligned items in a collapsible group, which doesn't suit my needs.

You can test the code below using the w3school TryIt editor

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Home</a>


<div class="ml-auto">
            <button class="btn btn-success">My Button</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav mr-auto"/>
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

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

html css bootstrap-4

Answer 1

Answer №1

Many of the solutions provided do not effectively address the issue and involve complex workarounds that are not in line with the intended use of Bootstrap 4 Navbar. These solutions often fail to display properly on mobile devices. It's important to note that the .row class should only be used for grid columns, and the grid is not supported as Navbar content

The solution is actually quite simple. The only adjustment required is to disable the flex-grow property (using flex-grow-0) applied to the navbar-collapse element. This enables the ml-auto class to correctly position the button on the right-hand side.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
    <a class="navbar-brand" href="#">Home</a>
    <button class="btn btn-success ml-auto">My Button</button>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
        <ul class="navbar-nav text-right">
            <li class="nav-item active">
                <a class="nav-link" href="#">Right Link 1</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Right Link 2</a>
            </li>
        </ul>
    </div>
</nav>

If you want the links to align right on mobile, you can also add the text-right class to the navbar-nav.

Demo:

For further information, you may also refer to: Bootstrap 4 - Navbar items outside the collapse

Answer 2

Many of the solutions provided do not effectively address the issue and involve complex workarounds that are not in line with the intended use of Bootstrap 4 Navbar. These solutions often fail to display properly on mobile devices. It's important to note that the .row class should only be used for grid columns, and the grid is not supported as Navbar content

The solution is actually quite simple. The only adjustment required is to disable the flex-grow property (using flex-grow-0) applied to the navbar-collapse element. This enables the ml-auto class to correctly position the button on the right-hand side.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-end">
    <a class="navbar-brand" href="#">Home</a>
    <button class="btn btn-success ml-auto">My Button</button>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse flex-grow-0" id="navbarSupportedContent">
        <ul class="navbar-nav text-right">
            <li class="nav-item active">
                <a class="nav-link" href="#">Right Link 1</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Right Link 2</a>
            </li>
        </ul>
    </div>
</nav>

If you want the links to align right on mobile, you can also add the text-right class to the navbar-nav.

Demo:

For further information, you may also refer to: Bootstrap 4 - Navbar items outside the collapse

Answer 3

Answer №2

I made some adjustments to your code. Check it out by viewing it on a fullpage and resizing the screen:

I included the d-sm-none class on the first button, added the justify-content-end class to your nav collapse, and introduced another button

<button class="btn btn-success  d-none d-sm-block">My Button</button>

within your nav collapse that will only be displayed when the screen size is sm or larger.

<!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.1.3/css/bootstrap.min.css>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark>
   <a class="navbar-brand" href="#">Home</a>


<div class="ml-auto>
            <button class="btn btn-success d-sm-none>My Button</button>
             

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent>
              <span class="navbar-toggler-icon></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent>
            <button class="btn btn-success  d-none d-sm-block>My Button</button>
                <ul class="navbar-nav ml-auto ">
                    <li class="nav-item active>
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active>
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

                </ul>
        </div>
</nav>
<br>

<div class="container>
  <h3>Navbar Forms</h3>
  <p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>

</body>
</html>

Answer 4

I made some adjustments to your code. Check it out by viewing it on a fullpage and resizing the screen:

I included the d-sm-none class on the first button, added the justify-content-end class to your nav collapse, and introduced another button

<button class="btn btn-success  d-none d-sm-block">My Button</button>

within your nav collapse that will only be displayed when the screen size is sm or larger.

<!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.1.3/css/bootstrap.min.css>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js></script>
</head>
<body>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark>
   <a class="navbar-brand" href="#">Home</a>


<div class="ml-auto>
            <button class="btn btn-success d-sm-none>My Button</button>
             

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent>
              <span class="navbar-toggler-icon></span>
            </button>

            <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent>
            <button class="btn btn-success  d-none d-sm-block>My Button</button>
                <ul class="navbar-nav ml-auto ">
                    <li class="nav-item active>
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active>
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

                </ul>
        </div>
</nav>
<br>

<div class="container>
  <h3>Navbar Forms</h3>
  <p>Use the .form-inline class to align form elements side by side inside the navbar.</p>
</div>

</body>
</html>

Answer 5

Answer №3

Finally, I have discovered the solution! The key is to effectively utilize the grid system. Make sure to adjust the col classes based on your responsiveness needs (particularly in the navbar collapse section). Additionally, it's important to note that the button and collapse should not be grouped together as you desired, since enclosing them in the same div can lead to issues with collapse functionality on mobile screens. Hopefully, this information proves beneficial for you.

body { 
    padding-top: 105px; 
}

.collapse{
  justify-content:flex-end;
}
.text-nowrap {
    white-space: nowrap;
}

<!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.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
... // Rest of the HTML code provided

Answer 6

Finally, I have discovered the solution! The key is to effectively utilize the grid system. Make sure to adjust the col classes based on your responsiveness needs (particularly in the navbar collapse section). Additionally, it's important to note that the button and collapse should not be grouped together as you desired, since enclosing them in the same div can lead to issues with collapse functionality on mobile screens. Hopefully, this information proves beneficial for you.

body { 
    padding-top: 105px; 
}

.collapse{
  justify-content:flex-end;
}
.text-nowrap {
    white-space: nowrap;
}

<!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.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
... // Rest of the HTML code provided

Answer 7

Answer №4

Resolved the issue by adding a "row" class to the div, allowing them to stack horizontally. However, this caused some unexpected behavior when the collapsed button was pressed, shifting towards the middle. This was fixed by adding more left margin.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Home</a>


    <div class="row ml-auto">
            <button class="btn btn-success ml-auto">My Button</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto" />
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

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

Answer 8

Resolved the issue by adding a "row" class to the div, allowing them to stack horizontally. However, this caused some unexpected behavior when the collapsed button was pressed, shifting towards the middle. This was fixed by adding more left margin.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
   <a class="navbar-brand" href="#">Home</a>


    <div class="row ml-auto">
            <button class="btn btn-success ml-auto">My Button</button>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
              <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto" />
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 1</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#">Right Link 2</a>
                    </li>

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

Customize your Bootstrap 4 navbar to align on the right with a button that remains visible on mobile devices

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Using Multiple SCSS Files to Reference a Centralized Style Sheet

What is the best way to include default text in my HTML input text field?

Having trouble with CSS3 radio buttons not functioning properly on Firefox?

Arrange divs in a stack fashion

The element's height appears to be fluctuating unexpectedly when I attempt to adjust it using percentage values within a narrow range

Tips for including a decimal point in an angular reactive form control when the initial value is 1 or higher

The jQuery .hasClass() function does not work properly with SVG elements

Having no capability to manipulate CSS using jquery

Shade of a row within a PHP table

Attempting to upload a file into the system

Is there a way to determine whether my CSS style modifications will impact other web pages?

navigating up and down html elements using css selectors

Increase or decrease the quantity of items by cloning with Jquery and dynamically changing the ID

The functionality of Selenium's get(link) feature appears to be experiencing issues

"Exploring the Dynamic Duo of AngularJS ngAnimate and animate.css

Manipulate container (div) to reveal and conceal

The Canvas element inside a Bootstrap modal is returning inaccurate mouse coordinates

Concealing specific HTML elements with ng-view in AngularJS

Centered Layout using HTML and CSS

Encountering a Blank Area at the Top of a Printed AngularJS Screen