Is there a way to arrange the navigation items to appear on the right side upon toggler click?

I've been trying to get the nav-items to align on the right side, but so far using the ms-auto class from Bootstrap isn't giving me the desired result.

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="583a37372c2b2c2a3928186d76697669">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-lg fixed-top navbar-light">
        <div class="container-fluid justify-content-between mx-5 px-4">
          <a class="navbar-brand" href="#">HELLO</a>
          <button
            class="navbar-toggler collapse collapsed"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
            aria-controls="navbarTogglerDemo02"
            aria-expanded="false"
            aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav ms-auto">
              <li class="navbar-item">
                <a class="nav-link active " aria-current="page" href="#">ABOUT</a>
              </li>
              <li class="navbar-item">
                <a class="nav-link active" aria-current="page"href="#">PROJECT</a>
              </li class="navbar-item">
              <li class="navbar-item">
                <a class="nav-link active" aria-current="page" href="#">RESUME</a>
              </li>
              <li class="navbar-item">
                <a class="nav-link active" aria-current="page" href="#">CONTACT</a>
              </li>
            </ul>
          </div>
        </div>

      </nav>
      <!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
    </header>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3d2e3f0f7a617e617e">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>

Currently, the nav-items are displayed on the left side, but I want them aligned on the right side instead.

If anyone has a solution for this issue, it would be greatly appreciated. Thank you!

htmlcssbootstrap-5

Answer №1

Utilize the responsive text alignment tools:

  • text-end: align to the right on mobile devices
  • text-sm-start: align to the left on sm screen size and above
<ul class="navbar-nav ms-auto text-end text-sm-start">

There are also a couple of issues with the current collapse code:

  • Remove the collapse classes from the button:

    <button class="navbar-toggler collapse collapsed" ...
                              ^^^^^^^^^^^^^^^^^^ remove these

  • Add .collapse to the collapse div:

    <div class="collapse navbar-collapse" id="navbarCollapse">
            ^^^^^^^^ add this

    https://i.sstatic.net/yBsMU.png

Here is the full working snippet:

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e988b9aaadfc4dbc4db">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Portfolio</title>
  </head>
  <body>
    <header>
      <nav class="navbar navbar-expand-lg fixed-top navbar-light">
        <div class="container-fluid justify-content-between mx-5 px-4">
          <a class="navbar-brand" href="#">HELLO</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
            aria-controls="navbarCollapse"
            aria-expanded="false"
            aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav text-end text-sm-start ms-auto">
              <li class="navbar-item">
                <a class="nav-link active" aria-current="page" href="#">ABOUT</a>
              </li>
              <li class="navbar-item">
                <a class="nav-link" aria-current="page"href="#">PROJECT</a>
              </li class="navbar-item">
              <li class="navbar-item">
                <a class="nav-link" aria-current="page" href="#">RESUME</a>
              </li>
              <li class="navbar-item">
                <a class="nav-link" aria-current="page" href="#">CONTACT</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <!-- <img class="img-fluid" src="img\heading-image.jpg" alt=""> -->
    </header>
    <!-- Optional JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="94f6fbfbe0e7e0e6f5e4d4a1baa5baa5">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</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

The sidebar made an unexpected leap from one side to the other, with no memory of ever tampering

I'm feeling a bit overwhelmed because I can't seem to figure this out. My goal is to create a basic page layout with a header, subheader, sidebar, content pane, and footer. Everything was going smoothly until I started writing a function in my J ...

htmlcss

Don't forget to strip off the height attribute once the transform is

Utilizing the transform property: .parent { display: inline-flex; flex-direction: column; align-items: center; } .first { height: 100px; } .second { height: 100px; transform: translateY(-50%); } <div class="parent"> <div ...

htmlcsstransform

What could be causing this slider to malfunction in Firefox?

I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...

javascriptjquerycsstwitter-bootstrap

What is causing the issue with my CSS keyframe animation not functioning correctly when using `animation-direction: reverse`?

Exploring the use of animation-direction: reverse to streamline my CSS keyframe animation process. An interesting scenario arises when a container div is clicked, toggling an "active" class using jQuery to trigger the animation in either forward or backwar ...

csscss-animations

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

javascripthtmlpolymerpolymer-1.0web-component

Creating a Search Functionality within a Tab Component in Ionic

I'm currently facing an issue with adding a search bar under the "Search" tab in my project. I've tried implementing similar logic to what's shown here, but it doesn't seem to function properly when using the ionic serve --lab live in-b ...

htmlangularjscordovaionic-framework

access pictures from a different directory using JavaScript

I am working with an images array that contains three jpg files. I am trying to set the background image of a class called pic using images from the array. The issue I'm facing is that the images are stored in an images folder with the URL images/. I ...

javascripthtmlcss

What is the process for setting an object's property as a href in an AJAX call?

I've got a quick query. How can I assign an object's property to the href attribute? I've indicated the line with a comment. success: function (listOfTags) { let tagData = ''; $.each(listOfTags, function (i, tag) { ...

htmljquerycssajaxhref

Adjusting margins for different screen sizes in Bootstrap 5

Is it possible to adjust spacing (margin/padding) per breakpoint in Bootstrap 5? Using something like mb-sm-2 doesn't seem to have any effect... Am I doing something wrong? I've already looked at the official documentation, but I'm still c ...

bootstrap-5

Browser unresponsiveness triggered by excessive Ajax setInterval functionality

Here is the test code I am currently using: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Ajax - one variable test</title> <style> body{ font-size: 12px; font-family: Arial;} </styl ...

jqueryhtmlajax

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

Is it possible to incorporate a linear-gradient below color as a background for Material UI Chip? linear-gradient(to right bottom, #430089, #82ffa1) The version of Material UI I am working with is v0.18.7. <Chip backgroundColor={indigo400} style={{widt ...

cssreactjsmaterial-ui

css avoiding code duplication with nested classes

I created a custom CSS class named button.blue: button.blue { background-color: blue; ... } button.blue:active { background-color: darkblue; ... } button.blue:hover { background-color: lightblue; ... } To implement this class, I use the following code: ...

css

The value retrieved by JQuery attr remains constant

Hey everyone, I'm having an issue with getting the ID from a custom attribute using jQuery. When I try to debug, I keep getting the same value each time. I have an HTML table that lists posts from a database using PHP, each with its own specific ID. ...

javascriptphpjqueryhtml

Update the content within every <td> element using AJAX/JQUERY on a table created from JSP

I have a database filled with descriptions and corresponding ID numbers. The table displays them like this: index.jsp <table> <tr> <td>Name:</td> <td>Id:</td> </tr> <c:forEach items ...

javascriptjavajqueryhtmlajax

Is it possible to have the navigation bar (bootstrap) appear on top of my slider as the default setting, without taking up additional space?

I'm encountering a rather simple issue that's giving me some trouble. I'm currently working on a website design using Bootstrap, and initially, there were no image sliders included by default. After integrating an image slider, I noticed th ...

htmlcssbootstrap-4

Discover the steps to trigger a Bootstrap popup modal when clicking on an anchor link using Angular

I have an Angular application and I would like to display a Bootstrap popup modal when the user clicks on a link in the footer. Here is the Bootstrap modal code: <button type="button" class="btn btn-primary" data-toggle="modal&q ...

htmlangulartwitter-bootstrap

Tips for accessing basic information from these websites without encountering CORS issues

Having issues retrieving data from the following two sites: and Eurolottery. The CORS issue is causing the problem, and I was able to retrieve data using a Chrome CORS extension and the provided code below: var HttpClient = function() { this.get = fu ...

javascripthtmlcors

What steps can I take to prevent Internet Explorer from caching my webpage?

After implementing Spring MVC for Angular JS on the front end, I encountered an issue where logging in with different user credentials resulted in incorrect details being displayed. This problem only occurred in Internet Explorer, requiring me to manually ...

javascripthtmlangularjsspring-mvc

Choose only the values that start with a letter in the autocomplete list

I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...

html

Leveraging HTML and PHP for integrating date and mobile number functionalities

I am a beginner in HTML and PHP. I have encountered an issue where the data displayed shows as "0000-00-00" for dates and if the mobile number entered is less than 9 characters, it displays the same numbers repeatedly. However, when I enter 10 digits for t ...

javascriptphphtmlmysql