How do I set up a navigation bar item to align to either side based on the selected language?

I need to adjust the positioning of the last list item component within a specific div. The webpage is available in both Arabic and English, with the direction changing based on the selected language.

Here is a snippet of CSS code that I'm using:

#navbarSupportedContent .nav-item {
  text-transform: uppercase;
  text-align: center;
  font-weight: 800;
  border-right: 1px solid #01154D;
  padding: 10px 24px;
}

.navbar {
  padding: 0px !important;
}

.navbar {
  position: relative;
  min-height: 40px !important;
  margin-bottom: 20px;
  border: none !important;
}

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top" style="">
  <div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto" style="/* float:inherit; */">
      <li class="nav-item active">
        <a class="nav-link" href="/webcenter/portal/ROPInternalPortal/pages_en">
          <span id="submenu1">Home</span>
        </a>
      </li>
      <li class="nav-item ">
        <a class="nav-link nav-hover-fix" href="/webcenter/portal/ROPInternalPortal/pages_employeetools">
          <span id="submenu1">Employee Tools</span>
        </a>
      </li>
      <li class="nav-item ">
        <div class="dropdown show">
          <a style="color:#e6ecf2;" aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" id="dropdownMenuLink" role="button">MEDIA CENTER</a>
          <div aria-labelledby="dropdownMenuLink" class="dropdown-menu">
            <a class="dropdown-item" href="/webcenter/portal/ROPInternalPortal/pages_mediacenter/photogallery">PHOTO GALLERY</a>
            <a class="dropdown-item" href="/webcenter/portal/ROPInternalPortal/pages_mediacenter/news1">NEWS</a>
            <a class="dropdown-item" href="/webcenter/portal/ROPInternalPortal/pages_mediacenter/newpage">ROP MAGAZINE</a>
          </div>
        </div>
      </li>
      <li class="nav-item ">
        <a class="nav-link" href="/webcenter/portal/ROPInternalPortal/pages_documents">
          <span id="submenu1">Documents</span>
        </a>
      </li>
      <li class="nav-item"><a data-afr-tlen="7" id="T:arabic2" class="nav-link xej" style="font-size: initial;" onclick="this.focus();return false;" data-afr-fcs="true" href="#"><span style="">العربية</span>
    <i aria-hidden="true" class="fa fa-language"></i></a>
      </li>
      <li class="nav-item" style=""><span id="T:wcLogoutLink:spacesActionPGL" class="x1a"><a data-afr-tlen="0" id="T:wcLogoutLink:logoutLink" title="Log out of WebCenter Portal" class="nav-linkglyphicon glyphicon-log-out xf0 " 
    " onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></span>
      </li>
    </ul>
    
    <span id="T:search2" class="x1a">
      <div class="navbar-form navbar-left visible-xs" id="searchxs"><div id="T:searchbox2" class="x131" aria-live="polite"><div style="display:none"><a id="T:searchbox2:_afrCommandDelegate" class="xej" onclick="this.focus();return false;" data-afr-fcs="true" href="#"></a></div></div>
      </div>
    </span>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

Implement display: flex and margin: left/right set to auto for the final LI element (using the :last-child selector) - based on whether the dir="rtl" attribute is present on the element or document

.navbar {
  padding: 0;
  list-style: none;
  display: flex;
  background: gold;
}

.navbar > * { padding: 0.5em 1em; }

.navbar > *:last-child {
  margin-left: auto;
}

[dir="rtl"] .navbar > *:last-child,
.navbar[dir="rtl"] > *:last-child {
  margin-right: auto;
  margin-left: 0;
}
<ul class="navbar">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<ul class="navbar" dir="rtl">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

Answer №2

Attempting to tackle the issue using pure JavaScript. Perhaps you can utilize this approach to address your own problem.

I believe the key property you are seeking is margin-inline-start.

.element {
  display: flex;
  background: #fff;
  box-shadow: 0 3px 10px 0 rgba(#000, 0.1);
  padding: 1rem;
  margin-bottom: 2.5rem;
  justify-content: space-between;
  border: 1px solid #000
}

.item {
  padding: 1rem 1.4rem;
  background: #673AB7;
  color: #fff;
  font-size: 24px;
}
.item:last-child {
  margin-inline-start: auto;
}
   
<div class="wrapper">  
  <p style="margin-bottom: 0.5rem;">Left to Right (LTR)</p>
  <div class="element">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
  
  <p style="margin-bottom: 0.5rem;">Right to Left (RTL)</p>
  <div class="element" dir="rtl">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
  </div>
</div>

Answer №3

Utilize Flexbox to align elements to the left and the last one to the right

All you need to do is include the following code snippet. Since you are already using bootstrap classes, add a new class to 2 div containers.

# New Class
.Nav-container{
 display: flex;
 # Alternatively, without flex, just add the property below
 justify-content: flex-start;

Add another class for the last nav-item or use a pseudo class

 .last-item{
  justify-self: flex-end;
 }
  or
 .nav-item:nth-of-type(5){
   justify-self: flex-end;
 }

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

Encountered an unexpected character "<" while looking for an identifier in a React.js project

Looking to expand my React skills, I decided to delve into a basic e-commerce project using Visual Studio. Unfortunately, I encountered some errors along the way: E-commerce Project Errors Here is a snippet of my index.js code: code snippet Any insight ...

cssreactjs

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. https://i.sstatic.net/JGl1M.png The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): ...

csscss-hyphens

Maximizing the potential of Angular forms through native FormData

Currently, I am revisiting an older project that still uses traditional methods for form submission. The HTML includes a form element with defined method and action. My goal is to submit the form in the old-fashioned way using the action attribute to post ...

javascripthtmlangularforms

When using the onclick function, an unexpected behavior occurs where instead of displaying content, the page

Below is a summarized version of my code: HTML <a onclick="showHideDiv('bio')" target='_self'> bio <div id="bio" class="shadowScreen" style="display: none;"> <p class="showBio"> Bio! </p> &l ...

javascripthtmlcssonclickrefresh

IE9 crashes when displaying elements with float:left style

After clicking the "off" and then "on" hyperlink in the provided HTML snippet, IE9 crashes. Here is the simplified version of the code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD& ...

htmlinternet-explorer-9

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

javascripthtmljqueryajaxlaravel

Trigger a click event on a div element that is nested within a form

Having trouble displaying an alert when clicking on a disabled button because the user needs to first click on a terms checkbox. Here's my jQuery code: $('#divButton').on("click", function() { if ($('#buybutton').prop('d ...

javascriptjqueryhtmlformsclick

Ways to compel divs underneath aligned divs

There are six divs numbered 1 to 6. I want divs 2, 4, and 6 to be positioned below divs 1, 3, and 5 respectively. Is it possible to achieve this layout? Sorry if my explanation is not very clear. Thank you. http://jsfiddle.net/LkGV8/ <body> <d ...

csshtml

Using Angular expressions, you can dynamically add strings to HTML based on conditions

I currently have the following piece of code: <div>{{animalType}}</div> This outputs dog. Is there a way to conditionally add an 's' if the value of animalType is anything other than dog? I attempted the following, but it did not ...

javascripthtmlangularjs

Sorry, but [email protected] cannot be accessed on this platform - Unsupported Platform (EBADPLATFORM

npm ERR! code EBADPLATFORM npm ERR! notsup Unsupported platform for <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86efe8e9f2efe0fc67b6a8b2a8b4">[email protected]</a>: wanted {"os":"linux","arch ...

bootstrap-4gulp-sass

Tips for aligning images within Bootstrap columns and using auto zoom to properly fill the space

Here is the code snippet for displaying images: <div class="row"> <div class="col-12"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-12"> <div class=&qu ...

htmlcssimagebootstrap-5

Issue with SmartNavigation in ASP.NET application using .NET 1.1

I am encountering an issue with a .Net 1.1 webapp where I have an aspx page with the attribute SmartNavigation=true set. Within this page, there is an anchor tag structured like this: <a href='#' onclick="$.copy('ANNUAL PAID OZ');" ...

html

Preventing the display of AngularJS HTML tags while the app is being loaded

I am new to AngularJS (using version 1.5.8) and I am currently following the tutorials provided on docs.angularjs.org/tutorial. Below is the HTML code snippet: <div class="jumbotron"> <h1>{{application_name | uppercase }}</h1> ...

javascripthtmlangularjs

Show only the present y-coordinate in the ToolTip of a chart.js

I am currently working on developing a chart using Chart.js, and my goal is to only show the y-axis value in the tooltip. The current display shows: date name_of_line: measurement example: Jan 1, 2020, 8:00:00 AM 5th Percentile: 100 oz. However, I would ...

javascripthtmlchart.jstooltip

Plotly Express Unleashes the Power of Subplots

After spending countless hours scouring the internet, I am feeling utterly frustrated and perplexed about how to deal with subplots using plotly express in Python. The concept is to create a line plot alongside a scatter plot and another line plot, where ...

pythonhtmlplotlysubplotplotly-python

Shifting the position of an HTML page to one direction

I'm currently working on adding a sidebar to my Twitter Bootstrap 3 project. The goal is to have a fixed positioned nav nav-pills nav-stacked show up on the left side of the page when a button is clicked. I've set its z-index to 1000 so it appear ...

javascriptjqueryhtmlcsstwitter-bootstrap

Exploring Web Scraping Through Dual System Security

I come seeking guidance on how to navigate a website with two different security systems in place. The first system requires a username and password, which I have successfully managed to handle. However, the second security system only requires a password ...

pythonhtmlauthenticationweb-scraping

Crop box overlaying video background

Utilizing jCrop to establish a crop region for a video element. My goal is to make the video section within the crop area fill a container with identical proportions, but I'm encountering challenges with the mathematical calculations. The sizes of th ...

javascriptjqueryhtmlcsshtml5-video

Tips for maintaining tab state using Angular Material

In my Angular 8 application with Angular Material, I have implemented four tabs where each tab allows editing. However, when going back from the edit mode to the tabs, I want the last selected tab to remain selected. My approach so far is as follows: exp ...

htmlangulartypescripttabsangular-material

incorporating additional lines into the datatable with the help of jquery

I am attempting to directly add rows to the datatable by assigning values in the .js file through the Metronic theme. However, despite displaying item values during debugging, the values are not being added to the datatable row array and thus not reflect ...

jqueryangularjsdatabasehtmldatatable