What is the method for adjusting the position of the navbar toggler icon on a small screen in Bootstrap?

In my Bootstrap 4 project, I have created a navbar with the brand logo centered and navlinks on both sides. However, when the screen size is reduced to a small size, the toggler button appears at the center right after the brand logo. I want the toggler button to be on the right side of the screen instead.

Below is the code snippet I am using:

<nav class="navbar navbar-expand-md navbar-light bg-light">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">EDITION</a>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#">Brand</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Login</a>
            </li>
        </ul>
    </div>
</nav>

I have attempted to use media queries to move the toggler button, but it doesn't seem to be working as expected:

@media (min-width: 576px) {
    .navbar-toggler {
        transform: translateX(50px) !important;
    }
}

Answer №1

Simply remove the toggler-button from the brand container.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-md navbar-light bg-light">

  <!-- first navigation -->
  <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">EDITION</a>
      </li>
    </ul>
  </div>

  <!-- brand -->
  <div class="mx-auto order-0">
    <a class="navbar-brand mx-auto" href="#">Brand</a>
  </div>

  <!-- toggle button for navigations -->

  <!-- second navigation -->
  <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Login</a>
      </li>
    </ul>
  </div>
</nav>

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

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

Please assist in changing the text color of the right side of my navigation bar to white with the help of Bootstrap

Is there a way to change the text color of my nav-bar to white, while keeping the background as 'primary-subtle' with Bootstrap? How can I override Bootstrap's default functions using CSS when combining these two styles? Here is the code sn ...

I'm having trouble getting the "flex direction: row" property to work within a table row

First, I applied flex to the table > tr. Next, I configured the flex-direction to be row. table { width: 100%; } tr { display: flex; flex-direction: row; flex-wrap: wrap; overflow: hidden; width:100%; } td:nth-child(1) { flex: 0 0 20%; ...

Incorporating a divider into a Material-UI MenuItem causes an additional border

I needed a way to separate the MUI MenuItem using a divider, but it resulted in an extra border around the item where the divider was placed. The highlighted section in the image shows the item that has the divider= true setting and the extra border. Is th ...

Issues arise with tabbed content as default content fails to display and classes are not added upon clicking

I'm currently working on a tabbed module that consists of three tabs. Here's how it operates: When the user clicks on a carousel_element, it reveals carousel_hidden-text within that div and displays it in another div called carousel_quote. I&ap ...

The conversion of string to number is not getting displayed correctly when using console.log or document.write. Additionally, the concatenated display is also not functioning as intended

Being new to JS and HTML, this program was created to enhance my understanding of the concepts. I attempted a basic program to convert a string to a number in three different ways, but I am having trouble determining if the conversion actually took place. ...

Tips for assigning an AngularJS value to jQuery

Displaying a value in a view using {{ myvalue }}. Assigning the value from the controller as $scope.myvalue = "123"; Attempting to send this value myvalue to an ajax call. Need to assign angularjs value to jquery value. How can I accomplish assigning t ...

Is there a way to obtain a comprehensive list of zip codes that are traversed by your route directions?

I have been searching through the Google Maps API (both Android and Web) but have not come across any references on how to retrieve a list of all the zip codes that are traversed by a given driving route. Could it be possible that I am missing something, ...

Angular, a Self-sufficient Module of Cascading Style Sheets

I have developed a factory that generates HTML content. I want to showcase this generated HTML within a specific section of my application, without its CSS affecting the rest of the site, and vice versa. While using an iframe is one option, I believe there ...

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

Incorporating an HTML image into a div or table using jQuery

I am a beginner in using JQuery within Visual Studio 2013. My question is how to insert an img tag into a table or div using JQuery? For example, I have a div and I would like to generate an image dynamically using JQuery. Or, I have a dynamically create ...

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

Adjust the overall size of the CSS baseball field

Attempting to adjust the size of the baseball field proved challenging, as it wasn't a simple task. Is there a way to achieve this effectively? Thanks, HTML - is using DIV the only method for resizing? I couldn't find a way to resize everything a ...

Why is it that this code can upload photos successfully, but not text files?

This is my PHP file for handling form actions. I have successfully implemented image uploads, but I am encountering an 'Invalid File Error' when trying to upload text files. What could be causing this error and how can I resolve it? <?php e ...

Ruling out the use of jQuery script within a dynamic framework

I have a unique jQuery script to create a "Back to Top" functionality: <script type="text/javascript"> $(document).ready(function(){ // Initially hide the #TopButton $("#TopButton").hide(); // Fade in the #TopButton on scrolling $(function () { ...

I am looking to enhance my CSS menu by incorporating a sub menu feature

I am having trouble getting my submenu to slide to the right horizontally. I have tried various CSS menus, but they are causing issues with my webpage. Here is the HTML code for the menu: <li class="widget"> <h2>Categories</h2> & ...

Implementing a persistent header on a WordPress site with Beaver Builder

My website URL is: . I have chosen to use beaver builder for building and designing my website. I am in need of a fixed header that can display over the top of the header image. Here is the code snippet that I currently have: <div id="header">html ...

Top method for passing props from child to parent React component

I am facing a challenge with passing data from child to parent components in React. I have an array that I need to save in my database, and I have set up a Parent component (AuthenticationPage.js) and a Child component (SignupForm.js) for this purpose. The ...

Set the size of the website to remain constant

Is it possible to keep your website at a consistent size so that when viewed on a larger screen, it simply adds more background or space to the page? (I prefer not to use media queries to change the style as the screen size increases) ...