Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. I actually want the buttons to be aligned to the left and the site title to the right. Here is an example of the desired layout:

<signup button> <login button>                               <title>


<!DOCTYPE html>

    <html lang="en">

        <head>

          <title> Edenthought </title>


          <meta charset="utf-8" />

          <meta name="viewport" content="width-device-width, initial-scale=1, maximum-scale=1"/>


          <link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/morph/bootstrap.min.css">


          <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">


          <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


        </head>


        <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">

            <a class="navbar-brand main-heading"> 
                    
              &nbsp; Edenthought 
            
            </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 text-center" id="navbarNavDropdown">
        
                
                <ul class="navbar-nav ms-auto">
        
        
                  &nbsp;     &nbsp;     &nbsp; 
        
        
                  <li class="nav-item">
              
                    <a class="btn btn-primary navbar-btn" type="button"  href="{% url 'register' %}">Register</a>
        
                  </li>
        
        
                  &nbsp;     &nbsp;     &nbsp; 
                  
        
                  <li class="nav-item">
        
                    <a class="btn btn-primary navbar-btn" type="button"  href="{% url 'my-login' %}">Login</a>
        
                  </li>
        
        
                  &nbsp;     &nbsp;     &nbsp; 
                  
        
                </ul>
              
                
              </div>
        
        
        </nav>



        <body>
      
            <br>
            <br>
      
            <div class="text-center">
      
            <h2> Edenthought.... A home for your thoughts. </h2>
      
              <br>
                
            
              <a class="btn btn-outline-primary" type="button"  href="{% url 'register' %}">Register</a>
      
            
            </div>
      
      
          </body>



        <script src=""></script>


        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"  crossorigin="anonymous"></script>


        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"

        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"

        crossorigin="anonymous">

        </script>

        <script src="{% static 'js/app.js' %}"></script>


    </html>

javascripthtmlcssfrontendbootstrap-5

Answer №1

Instead of using br tags, utilize the margin class from Bootstrap for better styling. In this updated version, I have repositioned the buttons () to the left side (me-auto class) and the site title () to the right side. Additionally, I have made adjustments for a more optimized mobile view.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Edenthought </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/morph/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
  </head>

  <body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-center">
      <div class="collapse navbar-collapse text-center" id="navbarNavDropdown">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a class="btn btn-primary navbar-btn" type="button" href="{% url 'register' %}">Register</a>
          </li>
          <li class="nav-item">
            <a class="btn btn-primary navbar-btn" type="button" href="{% url 'my-login' %}">Login</a>
          </li>
        </ul>
      </div>
      <a class="navbar-brand main-heading ms-auto order-1 order-lg-0">Edenthought</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>
    </nav>

    <div class="text-center mt-4">
      <h2> Edenthought.... A home for your thoughts. </h2>
      <a class="btn btn-outline-primary" type="button" href="{% url 'register' %}">Register</a>
    </div>

    <script src=""></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="{% static 'js/app.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

What is the best way to implement CSS in a web application?

I've encountered an issue where the CSS styles are not applying when I add my web app to the home screen of an iPhone and launch the app using a shortcut icon. To illustrate, consider the following examples. First, opening the app with Safari. Below ...

ioscssiphonesafari

A method to deactivate a button cell after it has been clicked within a for loop

I am struggling with correctly disabling a button in my React code when it is clicked. I attempted to pass in an array and handle the button click, but it consistently results in errors. This task seems more complicated than it should be. How can I ensure ...

javascriptreactjs

Error occurred while retrieving JSON array using Jquery

var groupMembers = $.parseJSON(members); $.each(groupMembers, function (index, item) { $.ajax({ type: "POST", url: "'.base_url(" / panel / listNotifications ").'/'.$id.'/" + valueSelected, d ...

javascriptjqueryjson

Retrieve the desired element from an array when a button is clicked

When I click on the button, I need to update an object in an array. However, I am facing difficulties selecting the object that was clicked. For better readability, here is the link to my GitHub repository: https://github.com/Azciop/BernamontSteven_P7_V2 ...

javascriptvue.js

Here's a tutorial on creating a dropdown menu containing a list of years. When a specific year is selected, the table will display the individuals who registered during that year using PHP

<table class="table table-striped table-bordered bootstrap-datatable datatable"> <thead> <tr> <th></th> <th>Business Name</th> <th>Commencement Da ...

phphtml

Tips for showcasing two cards side by side on mobile screens?

This is my glitch. I have a layout where I see 3 cards in a row for desktops, 2 cards per row on tablets, and 1 card for mobile devices. However, I would like the cards to resize and display 2 cards in a row on mobile. How can I achieve this? Here is the f ...

htmlcssresponsive-designresponsivemobile-website

Issue encountered when attempting to display JSON index on individual result page

This is a JSON response. { "listing": { "id": "1", "name": "Institute Name", "contact": "9876543210", "website": "http://www.domain.in", "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" da ...

javascriptangularionic-frameworkionic3

leveraging the localStorage feature in a for-in iteration

I am new to stackOverflow, although I have browsed the forums for help in the past. However, this time I couldn't find a solution to my current issue, so I decided to create an account and seek assistance. The problem at hand is related to a workout ...

javascriptobjectlocal-storagefor-in-loop

Data cannot be found when jQuery form submission is attempted

I am facing a challenge with my webpage that generates multiple dynamic forms through a database, each intended to submit data to a webhook for an API call. Despite searching various forums extensively, I have not yet found a solution to my problem. It ha ...

jqueryhtml

Mastering the Art of Utilizing $(this) in jQuery

$(".item_listing").hover(function(){ $(".overlay_items").display(); },function(){ $(".overlay_items").hide(); } ); This is my jQuery code. I am trying to display the "overlay_items" div when the "item_listing" div is hovered ov ...

javascriptjqueryhtmlcss

The functionality of the Hubot script is restricted to Slack conversations where I initiate a direct message with the

At this very moment, my automated Hubot assistant is functioning properly. When I send the following message via direct message to the robot in Slack: qbot !npm bower The response provided by the robot contains a link: https://www.npmjs.com/package/bowe ...

javascriptnode.jscoffeescripthubotslack

Using XSLT to format HTML tables for printing

In my current project, I am developing an XSLT that retrieves a list of items from an XML file and generates an HTML table for each item. The issue I am facing is that when I attempt to print the document, the tables at the end of the page get cut off and ...

htmlcssxmlxsltxslt-1.0

Is it possible to pass hooks as a property value from a useEffect in React.js?

As a newcomer to React, I am struggling to grasp the concept of how to use useEffect effectively. In one of my components, I have an array of objects stored in a file named cardData.js. These objects are used to automatically create cards, each containing ...

javascriptreactjsreact-hooksundefined

What could be causing one of my images to not appear on my Gatsby page?

Hey there, I could use some help with this issue: Recently, I created a website using Gatsby.js and deployed it to my web server (which is running NGINX on Ubuntu 20.04). The site uses Gatsby Image for querying and displaying images, and everything seems t ...

javascripthtmlgatsbygatsby-image

Navigating through an array of images using ng-repeat

I am attempting to iterate through the image array and have each image correspond to a separate li. Despite using the variable "image" as my identifier, I am encountering difficulties looping through the array. The line that I am trying to modify is as fol ...

angularjshtml

What is the best way to design a div that includes two separate columns for text and an image icon?

Check out this code: <?php foreach ($data as $vacancy) { ?> <div class="vacancy"> <img src="<?php echo Yii::app()->request->baseUrl; ?>/images/vacancy_icon.jpg" /> <div class="name"> < ...

htmlcss

Transforming the setting into redux using setTimeout

I am currently working with the following context: interface AlertContextProps { show: (message: string, duration: number) => void; } export const AlertContext = createContext<AlertContextProps>({ show: (message: string, duration: number) =&g ...

javascriptreactjstypescriptreduxreact-redux

Is there a way for me to perfectly align the image and the h1 header on the webpage?

I'm facing some challenges when it comes to aligning an image and an h1 tag on the same line. I've already tried using display: inline and inline-block, but they only affect the container of the two elements. I also set the width to 100% on the s ...

htmlcsscss-position

Using the information retrieved from Google Place Autocomplete and saving it for future reference

I am interested in utilizing the Google API "Place Autocomplete" widget to enhance user experience on my website. The specific widget I have in mind can be found here. My goal is to streamline the process of obtaining property addresses from Real Estate A ...

javascripthtmlcssgoogle-maps-api-3autocomplete

Can we improve the coding of this as it seems inefficient and uses up too much room?

Do you think there is a more efficient way to write this code? It seems quite impractical and takes up a lot of space. Essentially, it's about the random chance of obtaining a rarity, like acquiring an Uncommon sword. if (Math.random() * 100 < 100 ...

javascripttypescriptcode-cleanup