Tips on positioning a dropdown item to the far right of the page

I need help moving the language switcher and its items to the right side of the page. I tried using ml-auto but it didn't work for me. Whenever I try to adjust the position with padding-left, all the items end up in the center of the page. Any suggestions or solutions? Here is a preview of my webpage.

.navbar-nav {
  margin: 0 auto;
}

.nav-link {
  font-weight: 900;
  font-size: 1rem;
  float: right;
}

#top-nav {
  position: absolute;
  z-index: 3;
  width: 100%;
  background-color: transparent !important;
}

#logo {
  width: 100px;
  height: 50px;
  margin-left: 0;
  padding-left: 0;
}

.flag-icon {
  border-radius: 50%;
}

.navbar-light .navbar-toggler {
  color: #FFFFFF;
  border-color: #FFFFFF;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-nav">
  <a class="navbar-brand" id="logo" href="index.html">
    <img src="media/logo_light.svg" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>
  <div class="collapse navbar-collapse " id="navbarNav">
    <ul class="navbar-nav">
      <li id="main" class="nav-item active ">
        <a class="nav-link text-light" href="#">Main<span class="sr-only">(current)</span></a>
      </li>
      <li id="about-us" class="nav-item">
        <a class="nav-link text-light" href="#">About Us</a>
      </li>
      <li id="services" class="nav-item">
        <a class="nav-link text-light" href="#">Services</a>
      </li>
      <li id="contact" class="nav-item">
        <a class="nav-link text-light " href="#">Contact</a>
      </li>

      <li class="nav navbar-nav nav-item dropdown justify-content-end">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-ge"></span></a>
        <div class="dropdown-menu" aria-labelledby="dropdown09">
          <a class="dropdown-item nav-link" href="#gb"><span class="flag-icon flag-icon-gb"></span></a>
          <a class="dropdown-item nav-link" href="#ru"><span class="flag-icon flag-icon-ru"> </span></a>
        </div>
      </li>
    </ul>
  </div>
</nav>

htmlcssbootstrap-4

Answer №1

Are you interested in a design similar to this?

.navbar-nav {
  margin: 0 auto;
}

.nav-link {
  font-weight: 900;
  font-size: 1rem;
}

#top-nav {
  position: absolute;
  z-index: 3;
  width: 100%;
  background-color: transparent !important;
}

#logo {
  width: 100px;
  height: 50px;
  margin-left: 0;
  padding-left: 0;
}

.flag-icon {
  border-radius: 50%;
}

.navbar-light .navbar-toggler {
  color: #FFFFFF;
  border-color: #FFFFFF;
}

.navbar-nav {
  float: right;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="top-nav">
  <a class="navbar-brand" id="logo" href="index.html">
    <img src="media/logo_light.svg" />
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fas fa-bars"></i>
        </button>
  <div class="collapse navbar-collapse " id="navbarNav">
    <ul class="navbar-nav">
      <li id="main" class="nav-item active ">
        <a class="nav-link text-light" href="#">Main<span class="sr-only">(current)</span></a>
      </li>
      <li id="about-us" class="nav-item">
        <a class="nav-link text-light" href="#">About Us</a>
      </li>
      <li id="services" class="nav-item">
        <a class="nav-link text-light" href="#">Services</a>
      </li>
      <li id="contact" class="nav-item">
        <a class="nav-link text-light " href="#">Contact</a>
      </li>

      <li class="nav navbar-nav nav-item dropdown justify-content-end">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag-icon flag-icon-ge"></span></a>
        <div class="dropdown-menu" aria-labelledby="dropdown09">
          <a class="dropdown-item nav-link" href="#gb"><span class="flag-icon flag-icon-gb"></span></a>
          <a class="dropdown-item nav-link" href="#ru"><span class="flag-icon flag-icon-ru"> </span></a>
        </div>
      </li>
    </ul>
  </div>
</nav>

Answer №2

You can experiment with assigning a new class to your language switcher called "navbar-right." While this was effective in Bootstrap 3, its compatibility with Bootstrap 4 may not be guaranteed.

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

Customize the appearance of a React component depending on its unique identifier

After creating a simple TODO app with drag and drop functionality, I am now looking to apply a line-through CSS style to any task added or dragged into the second column of my app. What is the best way to target these tasks using their unique ID: <div c ...

javascriptcssreactjsreact-dnd

What is the best way to ensure my 2x1 table product description is displayed vertically and mobile responsive?

I need help displaying my product description in this format: ...

html

Tips for creating a div element that closes on the second click:

On the PC version, I have three blocks that open and close perfectly when clicked. However, on the mobile version, when I click on one block, it opens but does not close unless I click on another block. Additionally, if I click again on the same block th ...

javascriptjqueryhtmlcss

Ways to display an error message in Angular 8 when entering anything other than numbers in a text box

In my Angular 8 application, I have a text box that only allows the user to type numbers. If they try to type an alphabet or special character, it should display an error message below the text box. The error message should disappear once the user starts ...

htmlangulartypescript

In order to display the particle-slider logo effect, the JavaScript on the page needs to be refreshed

I have a website frontend integrated from WordPress using an HTML 5 Blank Child Theme. The site features a logo effect utilizing particle slider for screen sizes greater than 960px, and a flat logo image for screen sizes less than 960px. Everything works p ...

javascriptjquerycsswordpressresize

Arranging various JavaScript arrays

I've been working on a script using the Haversine formula, but I'm running into an issue where it always directs me to the first location in the array, no matter how many times I switch them around. Any suggestions? var locations = new Array( ...

javascriptarrayshtmlgeolocationhaversine

Customize your file input with Bootstrap 4 using bs-custom-file-input and create a Symfony 5 collection with dynamic upload fields

The issue of not having a label for the chosen filename in a bootstrap 4 upload field has been resolved using the plugin https://github.com/Johann-S/bs-custom-file-input You can utilize "bs-custom-file-input" to showcase the selected filename in the boots ...

javascriptphphtmlsymfonybootstrap-4

Storing multiple email addresses in an array using an HTML input element

I have a small React Bootstrap form where I am trying to save multiple email addresses entered by the user into an array. However, when I use onChange={()=> setEmails(e.target.value as any} it stores them in string format like this --> [email p ...

javascripthtmlreactjstypescript

Avoid automatically scrolling to the top of the page when a link is clicked

Within my ASP.NET MVC 5 application, there exists a partial view containing the following code: <a href="#" onclick="resendCode()" class="btn btn-link btn-sm">Resend</a> Additionally, on the View, the resendCode() function is present: funct ...

javascripthtmlasp.net-mvc

Creating dynamic CSS classes with SCSS/SASS

Recently, I encountered a scenario where I needed to automate the creation of a series of CSS classes by utilizing a mixin. This led me to ponder if there is a dynamic approach to achieve this. Essentially, the classes I have are structured as follows: . ...

csssass

Determining if the device is connected to the internet

Is there a way to create a unique code using HTML, JavaScript, or jQuery that executes a random action when the website detects that the device is offline? ...

javascriptjqueryhtmlajax

Retrieve the value from the model and if it is not defined, resort to the default value

Here's the HTML code snippet I've created: <div>IsValid : {{component._isValid || true}}</div> In this code, if component._isValid is undefined, it will display true. However, if it has a defined value, that value will be displayed. ...

htmlangularjs

Adjusting the size of absolutely positioned div elements

Currently, I am immersed in a project that involves a full-size slideshow background with content positioned above it. The header and footer are required to have fixed margins at the top and bottom, respectively. The central part needs to be resizable wit ...

jquerycss

Issue with dropdown list removeClass function

I am encountering an issue with the Jquery dropdown list click function. The addClass method is working properly, but the removeClass method is not functioning as expected. When I click on the dropdown list, it does not hide. Here is a live demo: http://j ...

javascriptjqueryhtmlcss

What is the best way to enable a visible bootstrap tab to be clicked more than once?

Is there a way to override the default behavior on bootstrap tabs that prevents clicking on the currently shown tab? I need the user to be able to click on the tab again even if it is already active, as I am using AJAX to load content and reloading the pag ...

javascriptjqueryhtmlcsstwitter-bootstrap

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...

javascriptjqueryhtmlcss

Color the text differently if the values are not the same (CSS and jQuery only)

In my code snippet below, you can see a set of HTML elements with specific classes and values: <div class="verizon-data-duplicate-device-key-89148000004605691537 k-content k-state-active" style="float: left; opacity: 1; display: block; ...

htmljquerycss

Guide on showcasing an alert notification when the data is already existing within an array through javascript

Need help with displaying an alert message in JavaScript for duplicate values in an array? var names = []; var nameInput = document.getElementById("txt1"); var messageBox = document.getElementById("display"); function insert() { names. ...

javascripthtmlcss

What is the best method for incorporating separate CSS files for individual HTML templates within a Flask project?

I am embarking on a Flask project and want to keep things organized by having a separate css file for each html file. Most tutorials available online suggest placing all the CSS code in one /static/styles.css file. However, when I try to run the following ...

htmlcssflaskjinja2

How can I use cookies to make an HTML div disappear when a button is clicked?

I've been attempting to conceal this message in Vue.js, but so far I haven't had any luck. Currently, I am utilizing the js-cookie library. My objective is as follows: HTML <div v-show="closeBox()"> < ...

htmlvue.jscookies