Align a bootstrap navigation item to the right without a dropdown menu

I'm having trouble positioning the Login/Register link to the right of my navbar. I've checked other solutions on this platform, but they either involve dropdown menus or don't work for me.

Here's my Navbar code:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7c1e1313080f080e1d0c3c49524f524c511d100c14d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="761419190205020417063643584558465b171a061e1747">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark navbar-expand-md bg-dark justify-content-md-center justify-content-start">
  <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
    <ul class="navbar-nav mx-auto text-md-center text-left">

      ...

      <li class="nav-item">
        <a class="nav-link" href="#">Login/Register</a>
      </li>
    </ul>
  </div>
</nav>

I attempted to use 

<ul class="navbar-nav ml-auto">
to surround the Login/Register Nav item, but it didn't work. I'm working with Bootstrap 5.3.

Here's the updated Navbar code with the ul class including ml-auto, but still facing issues. Perhaps it's related to how I'm including Bootstrap?

Code:

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

</body>
    <style>
        h1{
            font-family: 'Roboto', sans-serif;
        }

        .nav-link {
            font-size: 25px !important;
            margin-right: 15px !important;
        }

        .dropdown-item {
            font-size: 20px !important;
        }

    </style>
</html>
htmlcssbootstrap-5

Answer №1

You must relocate the login to a different ul list and apply display: flex to the container.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %}

        {% endblock %}
    </title>
    <script src="https://kit.fontawesome.com/c6f651f0e2.js" crossorigin="anonymous"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80e2efeff4f3f4f2e1f0c0b5aeb3aeb0ade1ecf0e8e1b1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

</head>
<body>
    <h1 style="text-align: center; font-size: 50px; ">Welcome to Crabapple Lake Parc</h1>
    <div style="text-align: center;">
        <a href="https://www.facebook.com/groups/1004130719643461/" target="_blank"><i class="fa-brands fa-facebook fa-2xl"></i></a>
    </div>
    <br>
    <!-- TODO: PLACE THE NAVBAR HERE -->
    <nav class="navbar navbar-dark navbar-expand-md bg-dark justify-content-md-center justify-content-start">
        <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
            <ul class="navbar-nav mx-auto text-md-center text-left">
                <li class="nav-item">
                    <a class="nav-link" href="/">HOME</a> 
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        AMENITIES
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">NEIGHBOURHOOD SOCIAL DECK</a></li>
                        <li><a class="dropdown-item" href="#">POOLS</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        RESOURCES
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">ACCEPTED PAINT COLORS</a></li>
                        <li><a class="dropdown-item" href="#">PROCESS FOR CHANGE</a></li>
                        <li><a class="dropdown-item" href="#">MANAGEMENT COMPANY CONTACT</a></li>
                        <li><a class="dropdown-item" href="#">BOARD MEMBERS</a></li>
                        <li><a class="dropdown-item" href="#">CLOSING INFORMATION</a></li>
                        <li><a class="dropdown-item" href="#">MEETING MINUTES</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">CALENDAR</a> 
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/contact">CONTACT</a> 
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/faq">FAQ</a> 
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Login/Register</a>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Login/Register</a>
                </li>
            </ul>
        </div>
    </nav>
    <!-- ADDITIONAL CONTENT HERE -->
    {% block content %}
    
    {% endblock %}
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24474b564164160a15150a12">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="771518180304030516073742594459475a161b071f1646">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-mQ93GR66B00ZXjt0YO5KlohRA5SY2XofN4zfuZxLkoj1gXtW8ANNCe9d5Y3eG5eD" crossorigin="anonymous"></script>
</body>
    <style>
        h1{
            font-family: 'Roboto', sans-serif;
        }

        .nav-link {
            font-size: 25px !important;
            margin-right: 15px !important;
        }

        .dropdown-item {
            font-size: 20px !important;
        }

    </style>
</html>

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

Illuminate the rows in a table generated from a parsed text file using PHP

I am facing an issue with my PHP logic for selecting and highlighting rows in a table based on dropdown selection. I have a group of text files that are parsed into a table, and I need to highlight rows that match selections from 5 dropdowns created from t ...

phphtmlparsingselecttext

Steps to include a HTML webpage within another page

I need assistance with a scenario involving two separate HTML pages on different servers. Merchant Form - Server A Payment Form - Server B Here's the desired scenario: The user completes all necessary fields on the Merchant Form and clicks submit. ...

javascripthtmljqueryajax

Only the cursor CSS is applied to the parent div, not its individual elements within the div

The current issue with the CSS is that it doesn't apply to the cursor setting. It only works if I set cursor:not allowed; to the .bar class and not specific elements like .bar p. My objective is to have all the p elements initially set to not-allowe ...

jqueryhtmlcss

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

Background image changing due to React re-render

I'm working on a React component that generates a random background image each time a user visits the page. However, I'm facing an issue where the background image updates every time a user types something into an input field. I've tried usi ...

cssreactjs

Based on the action taken, send specific data through AJAX - whether a form submission or a div click

There is a function called search, which can be triggered either by clicking on a div or submitting a form. When the div is clicked, the id of the div is sent as data in an AJAX call. However, if the form is submitted, I want to send the inputted data thr ...

javascriptjqueryhtmlajax

The background image seems to be malfunctioning

I've been attempting to recreate a similar design to this website, and while most of it is working smoothly, I'm encountering an issue with using ::before to add a background image as desired. Below is the code snippet in question: /* Section ...

htmlcsscss-selectorsbackground-image

Developing a custom styling class using JavaScript

Looking to create a custom style class within JavaScript tags. The class would look something like this: #file-ok { background-image: url(<?php echo json.get('filename'); ?>); } Essentially, the value returned from the PHP file (json ...

javascriptjquerycssajax

utilizing the scss random feature to assign a randomly generated background hue

Despite reading numerous articles on this topic, I am struggling to implement a feature where a random color from a list is applied as the background image every time the page is refreshed. $red: #fc5545; $pink: #FCCCD1; $green: #005E61; $greenLight: #42B ...

csssass

Is there a way to retrieve a CSS file using AJAX from a separate origin?

Whenever I am trying to load a CSS file via AJAX from my dreamhost account, I encounter the error message that says No 'Access-Control-Allow-Origin' header is present on the requested resource. After searching for solutions online, I stumbled upo ...

cssajax.htaccess

What is the correct way to align my checkboxes with their corresponding labels?

I have been working with HTML to make some adjustments to a website. I recently got feedback to change the label of my checkbox, however, it is now overlapping with another checkbox. How can I resolve this issue? ...

htmlcss

What is causing the javascript in my svg files not to function when embedded in an html document?

I have the following code for an SVG: <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="470px" height="260px" version="1.1" onload="addEvent ...

javascripthtmlsvg

We encountered an issue loading the resource: the server has returned a 404 (Not Found) error message and a 403 Forbidden error message. However, the resource functions properly on Codepen and localhost

I have a CodePen demo that works fine. However, when I upload it to the server, it stops working properly and most external references show 404 errors. Initially, there were no problems, but now it seems to be an issue like this: !--> http://sachin.ipov ...

htmlcss

Issue with Bootstrap side navbar not collapsing when clicked on a link

Currently, I'm working on creating a website for a friend. While I used to have some experience with coding in the past, it has been a while and I am a bit rusty. This time around, I decided to use bootstrap for the project. However, I'm struggli ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is it possible to use negative values in css?

Is it acceptable to utilize negative values in CSS? For instance: margin:-11px 20px -18px 0px; OR Is there a prevailing guideline that prohibits the use of negative values? ...

css

The arrangement of Bootstrap columns does not appear to be in alignment with one another

While utilizing Bootstrap 4, I am encountering an issue with the Footer section. My intention is to create three columns of equal width using the col-md-6 class as outlined in the documentation. Here is the code snippet: <footer class="footer"> &l ...

htmlcssbootstrap-4

CSS trick for stylish arrow placement on top of a slide

Hey there! This is my first time navigating through the slick carousel functionality. I'm currently facing a challenge with adjusting the positioning of the arrow within the slider. My goal is to have the arrow displayed at the top level just like the ...

htmlcsssliderpositionslick.js

Tips on adjusting the size of a font icon using an inline element prior to the font being fully loaded

I'm facing an issue with embedding an icon font within text so that it wraps properly. Currently, the only way I can achieve this is by using &nbsp; between the text and the icon (i tag with font awesome). However, this causes a problem as the ico ...

htmlcssfont-awesomeicon-fonts

The module 'AppModule' encountered an unexpected value 'FusionChartsModule' during import. To resolve this issue, make sure to include a @NgModule annotation

How can I integrate the FusionChartsModule into my app.module using Angular 8? Here is the code snippet: *error:Unexpected value 'FusionChartsModule' imported by the module 'AppModule'. Please add a @NgModule annotation. *, I a ...

javascripthtmlangularfusioncharts

Achieve a full page layout with content and attach the footer to the bottom using flexbox in Tailwindcss and Nextjs

How can I use flex-grow to make the body section fill the screen and keep the nav fixed at the bottom? I'm having trouble figuring out which elements to apply these properties to. Can anyone provide guidance on which element should have these styles? ...

javascriptcssreactjsnext.jstailwind-css