Issue with aligning nav-items to the right in Bootstrap navbar-right

I am attempting to align two nav-items (for login/registration, etc.) to the right of a website navbar with a navbar toggler for mobile. Despite trying to use the navbar-right class as suggested, it doesn't seem to work.

Here is the code snippet:

    <!-- Navbar -->
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">

        <a class="navbar-brand" href="/index.php"><img src="/assets/img/logo_white.png" style="height: 35px;"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNavDropdown">

            <ul class="nav navbar-nav">

                <li class="nav-item <?php if ($sect == 'home') { echo 'active';} ?>">
                    <a class="nav-link" href="/index.php">Home</a>
                </li>

                <li class="nav-item dropdown <?php if ($sect == 'about') { echo 'active';} ?>">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        About
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                        <a class="dropdown-item <?php if ($page == 'about-us') { echo 'active';} ?>" href="/about/about-us.php">About Us</a>
                        <a class="dropdown-item <?php if ($page == 'staff') { echo 'active';} ?>" href="/about/staff.php">Staff Team</a>
                        <a class="dropdown-item <?php if ($page == 'partners') { echo 'active';} ?>" href="/about/partners.php">Partners</a>
                    </div>
                </li>

                <li class="nav-item dropdown <?php if ($sect == 'resources') { echo 'active';} ?>">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Resources
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item <?php if ($page == 'downloads') { echo 'active';} ?>" href="/resources/downloads.php">Downloads</a>
                    <a class="dropdown-item <?php if ($page == 'charts') { echo 'active';} ?>" href="/resources/charts.php">Charts</a>
                    <a class="dropdown-item <?php if ($page == 'metar') { echo 'active';} ?>" href="/resources/metar.php">METAR Decoder</a>
                    </div>
                </li>

                <li class="nav-item <?php if ($sect == 'academy') { echo 'active';} ?>">
                    <a class="nav-link" href="/academy/index.php">Academy</a>
                </li>

                <li class="nav-item <?php if ($sect == 'fly') { echo 'active';} ?>">
                    <a class="nav-link disabled" href="#">Fly</a>
                </li>

                <li class="nav-item <?php if ($sect == 'forums') { echo 'active';} ?>">
                    <a class="nav-link" href="https://forums.multicrew.co.uk/">Forums</a>
                </li>

                <li class="nav-item <?php if ($sect == 'book') { echo 'active';} ?>">
                    <a class="nav-link" href="https://multicrew.setmore.com/">Book</a>
                </li>
                
            </ul>

            <ul class="nav navbar-nav navbar-right">

                <li class="nav-item">
                    <a class="nav-link" href="https://portal.multicrew.co.uk/"><i class="fa fa-sign-in"></i> Login</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://portal.multicrew.co.uk/register"><i class="fa fa-user"></i> Register</a>
                </li>

            </ul>

        </div>
    </nav>
    <!--/END Navbar-->

Answer №1

Upon reviewing your website, I noticed that you are utilizing Bootstrap 4, which no longer utilizes the 'navbar-right' class like Bootstrap 3.

I have come across some examples of Bootstrap 4 navigation that could assist you in designing your menu layout, I hope this proves to be helpful for you.

Answer №2

I made an adjustment to your code by switching out the navbar-right class with the Bootstrap 4 class ml-auto (margin-left:auto), and now it functions as intended.

Feel free to test the updated code snippet below by clicking on the "run code snippet" button:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<nav class="navbar navbar-expand-md navbar-dark navbar-static-top bg-dark">

    <a class="navbar-brand" href="/index.php"><img src="https://picsum.photos/55" style="height: 35px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarNavDropdown">

        <ul class="nav navbar-nav">

            <li class="nav-item ">
                <a class="nav-link" href="/index.php">Home</a>
            </li>

            <li class="nav-item dropdown active">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    About
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item active" href="/about/about-us.php">About Us</a>
                    <a class="dropdown-item " href="/about/staff.php">Staff Team</a>
                    <a class="dropdown-item " href="/about/partners.php">Partners</a>
                </div>
            </li>

            <li class="nav-item dropdown ">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    Resources
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item " href="/resources/downloads.php">Downloads</a>
                    <a class="dropdown-item " href="/resources/charts.php">Charts</a>
                    <a class="dropdown-item " href="/resources/metar.php">METAR Decoder</a>
                </div>
            </li>

            <li class="nav-item ">
                <a class="nav-link disabled" href="/academy/index.html">Academy</a>
            </li>

            <li class="nav-item ">
                <a class="nav-link disabled" href="#">Fly</a>
            </li>

            <li class="nav-item ">
                <a class="nav-link" href="https://forums.multicrew.co.uk/">Forums</a>
            </li>

            <li class="nav-item ">
                <a class="nav-link" href="https://multicrew.setmore.com/">Book</a>
            </li>

        </ul>

        <ul class="nav navbar-nav ml-auto">

            <li class="nav-item">
                <a class="nav-link" href="https://portal.multicrew.co.uk/"><i class="fa fa-sign-in"></i> Login</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="https://portal.multicrew.co.uk/register"><i class="fa fa-user"></i> Register</a>
            </li>

        </ul>

    </div>
</nav>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

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

Load the data from amp-list after triggering an event

I am currently exploring ways to load data on my second amp-list only after the first one has a selected value. Additionally, I am struggling to display a placeholder for the second amp-list. <div class="row"> <div class="col-sm-4 position-in ...

The application of border-radius to a solitary side border forms a unique "crescent moon" shape rather than a traditional semi-circle

Is there a way to transform this shape into a regular semicircle, avoiding the appearance of a moon, and change the image into a circle rather than an ellipsis? http://jsfiddle.net/226tq1rb/1/ .image{ width:20%; border-radius:500%; border-rig ...

Display a list of image buttons that, when clicked, will switch the

Hello everyone, I'm currently using Django's template language along with JavaScript to implement a "clicked image button change image" feature. However, the issue I'm facing is that only the last button is being affected. I'm not sure ...

Minimum width compared to Maximum Width

Exploring media queries for the first time and seeking some guidance. I initially developed a Desktop version of my website, now considering making it responsive as well. While researching, I came across suggestions to use max-width in this scenario, but ...

Challenges with styling DIV elements using CSS

Currently working on a website and I've been dividing it into columns with the property: float: left; However, when viewed on a smaller resolution or if I resize the browser window, the div cells collapse on top of one another like boxes stacking up ...

Whenever I click the left mouse button, the website crashes

Why does clicking the left mouse button make the website scroll down? Any ideas for a solution? Check out the link here: I've tried everything since I just started working on my website. Be prepared to be shocked when you see the source code HAHAHHA ...

The JavaScript calculator fails to display the value of buttons on the screen when they are pressed

I was attempting to create a calculator using JavaScript, but when I click on any button, nothing happens (the buttons don't display their values on the calculator's screen). My text editor (vs code) didn't indicate any errors, but upon insp ...

An error occurred when attempting to run the command npm run compile:sass, displaying the message: npm ERR! missing script:

Everything seems to be in place with the sass folders and files, so what could be the issue? I have my package.json file set up correctly with the following code: { "name": "starter", "version": "1.0.0", " ...

Add a hyperlink to a div element without directly editing the HTML code

Is it possible to add a link to the div using JavaScript instead of changing the HTML and inserting an <a>-tag? <div class="some-class">Some content</div> ...

Tips for linking to a page and dynamically adding a class to the body after it has been fully loaded

I've been working on a template that includes a blog.html file featuring various layouts: full-width layout 2 column layout 3 column layout 4 column layout I've customized the blog.html so that when specific classes are added to the body tag, ...

include a button next to the input field

As you reduce the browser window size, you may notice a different layout designed specifically for iPhone. One question that arises is how to add a button next to the search text box dynamically using JavaScript. The issue at hand is that the text box is b ...

How do I hide a div if its contents exceed the available space in CSS?

On mobile screens, one of my divs is displaying below the navigation bar and I want to hide it using pure CSS. Can anyone suggest a solution? I've attempted using "text-overflow: hidden;" and "overflow: hidden;" but they don't seem to be working ...

jQuery code runs smoothly on Firefox but encounters issues on Chrome

I'm experiencing an issue with a script that is supposed to post a comment and load the answer from a server. The script works fine in Firefox, but in Chrome, it seems that no event is triggered. You can click the button, but nothing happens. I'v ...

Utilizing jQuery to dynamically update background colors within an ASP repeater based on the selected value of a dropdown list

On my asp.net web page, I have a repeater that displays a table with various fields in each row. I am trying to make it so that when the value of a dropdown within a repeater row changes, the entire row is highlighted in color. While I have achieved this s ...

Ways to make a button blink using AngularJS

Currently working on an AngularJS SPA application where a button is present in the front-end HTML page. When this button is clicked, it triggers an operation which takes some time to complete. I want to inform the user that the operation is still in prog ...

The process of displaying HTML code in an Android WebView through a PHP web service

I have a mobile application for Android that retrieves data from my PHP JSON web service. I want my PHP service to send JSON data to my Android app so it can display HTML content properly. In my Android app, I am using a TextView to show text content. I h ...

What is the method to create a link that doesn't take up the entire page?

As a beginner in HTML, I have been working on a website for fun and facing an issue with buttons. When I add a button, the entire area becomes clickable, even if there is empty space around it. This means that you can click on the left or right side of the ...

Provide necessary CSS styles exclusively

Is there a method to streamline extensive CSS files by isolating only the necessary selectors for a specific page, and generating new css files containing just these selectors? Scenario: I am dealing with a significantly large CSS file that I need to opti ...

When resizing the window, divs shift positions and prevent the use of the horizontal scrollbar

I'm encountering an issue with my website layout. Specifically, I have a full-width navbar with some divs nested within it. However, when the page is resized, the position of these divs in the navbar shifts and a scrollbar appears at the bottom of the ...

React Autocomplete Input Not Functioning as Expected

I've been working on a form that needs autocompletion for emails, allowing users to select from browser suggestions. In HTML, I would typically use autocomplete='on' in the inputs or forms and it worked perfectly. However, when trying to imp ...