Adjust the Bootstrap Navbar by positioning one navigation item to the right side

I want to align the logout button to the right within my bootstrap navbar.

https://i.stack.imgur.com/PDvSv.png

Here is a demonstration of the current behavior: https://codepen.io/agrawalo/pen/mdbKYLX

Code:

<nav class="mb-1 navbar navbar-expand-sm navbar-dark bg-dark sticky-top">

    <div class="container">
        <!-- Collapse content -->
        <div class="justify-content-end">
            <!--Links-->
            <ul class="navbar-nav">
                <li class="nav-item {% if current == 'Allocate' %}active{% endif %}">
                    <a class="nav-link" href="/">Allocate Stocks</a>
                </li>
                <li class="nav-item {% if current == 'Portfolio' %}active{% endif %}">
                    <a class="nav-link" href="/portfolio">Portfolio</a>
                </li>
                <li class="nav-item {% if current == 'Transactions' %}active{% endif %}">
                    <a class="nav-link" href="/transactions">Transactions</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {% if current == 'Leaderboard' %}active{% endif %}" href="/leaderboard">Leaderboard</a>
                </li>
                <li class="nav-item {% if current == 'Rules' %}active{% endif %}">
                    <a class="nav-link" href="/rules">Rules</a>
                </li>
                <li class="nav-item {% if current == 'Resources' %}active{% endif %}">
                    <a class="nav-link" href="/resources">Resources</a>
                </li>
                <li class="nav-item justify-content-end">
                    <a class="nav-link" href="/logout">Logout</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

How can I achieve this alignment?

htmlcsstwitter-bootstrap

Answer №1

If you want to achieve this, make sure to include two .navbar-nav elements instead of just one. You can then add either the mr-auto class to the first one or the ml-auto class to the second.
To ensure proper styling, don't forget to apply the following CSS to their immediate parent:

display: flex;
flex: 1 0 100%;
align-items: center;

It appears that you have removed the default styles applied by the classes collapse and navbar-collapse.

For a detailed example of correct navbar markup, refer to Bootstrap documentation here: Navbar.

You can also view your updated code snippet here on CodePen.

Answer №2

To align content to the right, you should rearrange your code as shown below:

<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top" aria-label="Main Menu">
    <div class="container">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a href="#" class="nav-link">Link to the left</a>
            </li>
            <li class="nav-item mr-1">
                <a href="#" class="nav-link">Link to the left</a>
            </li>
        </ul>
        <ul class="navbar-nav justify-content-right">
            <li class="nav-item mr-1">
                <a href="#" class="nav-link">To the right</a>
            </li>
        </ul>
    </div> 
</nav>

EDIT: Upon reviewing, I see that my previous solution included unnecessary code for a collapsing navigation. You can simply omit the toggle button and collapse code in your implementation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

*ngIf doesn't seem to be functioning as expected compared to other *ngIf directives

Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...

javascripthtmlangularmeteor

To make a JavaFX label stand out, simply prepend a vibrant red asterisk at the start of

I'm facing a challenge with my SceneBuilder project. I have developed a scene that consists of several labels, and I want to highlight some of them by adding a red asterisk at the beginning of their text. Unfortunately, I haven't been able to fin ...

cssjavafx

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

javascriptjqueryhtml

Presentation and selection list

Here is the CSS code I am using: .nav li a { background-color:#000; color:#fff; text-decoration:none; padding:10px 15px; display:block; } .nav > li { float:left; } .nav li a:hover { background-color:#4db4fa; } .nav li ul { ...

htmlcss

Can one open a unique custom pop-up before the window is about to close?

Seeking a way to create a pop-up confirmation dialog for users when they try to log out or stay on the page while logged in. I attempted using the code below, but haven't been able to find the correct solution: window.onbeforeunload = function (e) { ...

javascriptjqueryhtml

Styling a div element in CSS with absolute positioning and the ability to

I am looking to set specific positions and dimensions for the div elements within my HTML document. Refer to this image for reference: https://i.stack.imgur.com/ANBVm.png For each of these div elements, I want a vertical scrollbar to appear if the content ...

htmlcssscrollpositionabsolute

Swapping out the video in real-time using an on-demand script

Recently, I encountered an issue with my blog's YouTube video switcher. It seems that the videos won't play once they are changed, and it is related to a light YouTube embed script that I found here: . I believe this script was implemented to imp ...

javascripthtmliframeyoutube

Exploring the Images directory

I hate to admit it, but I'm really struggling with this question. It's frustrating and I've searched everywhere for an answer. Currently, I'm using WAMP on Localhost with PHPstorm. The issue I'm facing is accessing the images di ...

phphtmlimagepathdirectory

The container is not showing the JSTree as expected

My current project in JavaScript involves integrating a JSTree structure, but I'm encountering an issue where the tree is not showing up or rendering within its specified parent container. Below is the snippet of code I have been using to attempt to d ...

javascripthtmljstree

jquery: centralizing progressbar growth on the page

Working with Bootstrap progress bars is a regular task for me, and I have included a small example below. var $progress = $('.progress'); var $progressBar = $('.progress-bar'); var $alert = $('.alert'); setTimeout(function() ...

jquerycss

When initializing a new instance of Stripe using cartalyst/stripe-laravel, an error occurs stating "The Stripe API key has not been properly defined!"

I am eager to explore Stripe and learn how to process payments. Currently, I am utilizing the cartalyst/stripe-laravel package to create a new instance of Stripe following the instructions provided here. The code snippet should resemble this: $stripe = ...

phphtmllaravelstripe-payments

The fixed positioned div with jQuery disappears when scrolling in Firefox but functions properly in Chrome, IE, and Safari

Click here to see a div located at the bottom of the right sidebar that is supposed to behave as follows: As you scroll down the page, the div should change its class and become fixed at the top of the screen until you reach the bottom of the parent el ...

javascriptjqueryhtmlcssfirefox

Why are my video files exhibiting inconsistent behavior?

I've encountered an issue with the code on my website where I'm trying to display a 40-second video. The video converter I used seems to have added extra video types, which may be causing the problem. Here's what the HTML code looks like: ...

csshtmlvideoautoplay

What is the best way to customize the appearance of a non-current month cell within the date picker?

I'm currently in the process of developing a registration form for my JavaFX application. I am faced with an issue where I need to disable certain cells in the date picker when they do not belong to the displayed month. Let's take a look at my cu ...

javacssjavafx

Extract the content from the division and set it as the image source

Looking for a way to retrieve the content from a div and insert that into the 'src' parameter of an image. Working on a project where JSON is used to load translation files, preventing me from loading images directly, but I want to at least load ...

javascriptjqueryhtmljson

Adjusting button alignment when resizing the browser

Is there a method to relocate buttons using Bootstrap 5 in HTML or CSS when the browser is resized? For instance, if the button is centered on a full-screen browser, but I want it at the bottom when resized. Is this achievable? ...

htmlcssbootstrap-5

Ways to continuously monitor a div for a specific class

Is there a way to continuously check if an area has the class "top-nav" in order for the alerts to work every time it lacks or contains the class? How can I achieve this functionality? Check out the code on jsfiddle: https://jsfiddle.net/jzhang172/117mg0y ...

javascriptjqueryhtmlcss

What could be causing the error message 'Alias configuration for Field browser is not valid' to appear when attempting to compile SCSS using Webpack through the terminal?

Recently, I decided to try using webpack to compile my scss files for the first time. However, when attempting to start it, I encountered an error message stating: Field 'browser' doesn't contain a valid alias configuration In addition, ano ...

htmlcssnpmwebpacksass

Is there a way to disregard inherited styles without relying on the use of "!important"?

Is there a way to create a new class in CSS that ignores all inherited styles without needing to use !important for each one individually? This is my HTML code: <div class="text"> <h2>Title</h2> <span>Date</span> &l ...

htmlcss

Implementing Dynamic Checkbox Selection using JavaScript

Could someone please assist me with this coding challenge? HTML <div id="toggle"> <ul> <li class="active"><input type="checkbox" id="test" value="2014" name="test" checked/> 2014</li> <div style="display:block;" id ...

javascriptjqueryhtmlcheckbox