Align item in expanded toggled bootstrap navbar

Question

I'm currently learning html, css, bootstrap (and soon js) and maybe you can help me with something i struggle to do:

I made a navbar with bootstrap, that is responsive and collapes at a smaller screen.

normal view: https://i.stack.imgur.com/96crH.png collapsed view: https://i.stack.imgur.com/cvp4T.png

when the navbar collapses it looks fine, but when I click on the toggler and the items expand, i want the "logout" button to stay in the top row on the very right next to the toggler icon or at least appear on the right side underneath the other items (currently it moves to the left)

expanded view https://i.stack.imgur.com/KuQkp.png

Can anyone help me how to do that?

Here's some code:

html {
    box-sizing: border-box;
}

body {
    background-color: rgb(255, 255, 255);
    font-family: 'Raleway', sans-serif;
    margin:0

}

#logo {
    width: 1em;
    padding-bottom: 0.3em;
}

.navbar {
    margin-bottom: 5px;
}

.navbar-collapse {
    padding-right: 15px;
}

.navbar-toggler-icon {
    width: 1em;
    height: 1em
}

.nav-link{
    text-align: right;
}

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PocketMoney</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="projektapp.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,600;1,300;1,600&display=swap"
        rel="stylesheet">
</head>

<body>
    <nav class="navbar navbar-expand-sm navbar-dark" style='background-color: rgb(4, 85, 85)'>
        <a class=" navbar-brand active" href="#"><span class="sr-only">(current)</span>
            <img id="logo" src="wallet.png" alt="">
            Brand
        </a>

        <button class="navbar-toggler ml-auto mr-2" type="button" data-toggle="collapse" data-target="#navbar-content"
            aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end" id="navbar-content">
            <div class="navbar-nav">
                <a class="nav-link" href="#">Home</a>
                <a class="nav-link" href="#">Something else</a>
                <a class="nav-link" href="#">About</a>

            </div>
        </div>
        <div id="bt-logout">
            <button type="button" class="btn btn-sm btn-dark">Logout</button>
        </div>
    </nav>

    <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>

See "Right align button that is always visible" [in this answer](https://stackoverflow.com/a/41513784/171456). Like this: https://www.codeply.com/p/Epz0YYvFf1 — Carol Skelly, Dec 29 '20 at 12:43
Thank you, your code example worked like a charm. The only think I had to add was "order-last order-sm-0" to my navbar content. I don't really understand how it works though, because the elements in the navbar aren't in a row/columns, so what am I ordering and in reference to what? So much to learn.. — Elli, Dec 29 '20 at 13:33

score 0 · Answer 1 · answered Dec 29 '20 at 11:07

Logout button comes down when you click on the hamburger coz navbar property changes to block thats why is creating some issues. just not able to give the brief for whole issue.

but i got u. just add this css and your file.

.navbar-collapse {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  background: #045555;
  transition: all 0.3s;
  z-index: -2;
  display: block!important;
  visibility: hidden;
  opacity: 0;
}
.navbar-collapse.show {
  top: 100%;
  visibility: visible;
  opacity: 1;
}

Align item in expanded toggled bootstrap navbar

1 Answers1