The button with the class ".navbar-toggler" in Bootstrap 4 is not designed to float to the right

I've been trying to use Bootstrap 4, but no matter what I do, I can't seem to get the .navbar-toggler button to align to the right. It feels like I'm missing something simple, but I just can't figure out what's going wrong.

Check out my code below:

NOTE: You may need to resize the window to see the button.

.title-bar {
  padding: 0px;
  margin: 0px auto;
}

.company-name {
  font-family: "Trajan Pro";
  font-size: 36px;
  margin: 0px auto -15px 5px;
}

.navbar-nav {
  width: 100%;
}

#seal {
  margin: -50px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark title-bar">
  <div class="container-fluid title-bar">
    <div class="navbar-header">
      <div class="d-flex flex-row d-md-none">
        <a class="navbar-brand d-flex" href="#" style="margin: 0px 10px">
          <img style="margin: 0; height:65px;" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="lion head" />
          <div class="company-name">
            <div class="text-center">Fake</div>
            <div class="text-center" style="font-size: 85%; margin-top: -20px;">Co.</div>
          </div>
        </a>

        <button class="navbar-toggler align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
      <div class="d-none d-md-block">
        <a class="navbar-brand company-name" href="#">Fake Company</a>
      </div>
    </div>
  </div>
</nav>

<nav class="navbar navbar-expand-md bg-secondary navbar-dark">
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="nav navbar-nav d-flex">
      <li class="nav-item flex-fill text-center active"><a class="nav-link" href="#">Home</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">About Us</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Profile</a></li>
      <li class="nav-item flex-fill text-center">
        <img class="d-none d-md-inline" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="coa" style="max-width:110px; width:50%" />
      </li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Products</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Pricing</a></li>
      <li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Contact Us</a></li>
    </ul>
  </div>
</nav>
<div class="d-sm-none">
  extra small
</div>
<div class="d-none d-sm-block d-md-none">
  small
</div>
<div class="d-none d-md-block d-lg-none">
  medium
</div>
<div class="d-none d-lg-block d-xl-none">
  large
</div>
<div class="d-none d-xl-block">
  extra large
</div>

For a live demo, check it out on JSFiddle.

htmlcssflexboxbootstrap-4

Answer №1

navbar-header has been deprecated. Please remove it and replace it with the inner flex div w-100 (width:100%)

<nav class="navbar navbar-expand-md bg-dark navbar-dark title-bar">
    <div class="container-fluid title-bar">
        <div class="d-flex flex-row d-md-none w-100">
            <a class="navbar-brand d-flex" href="#" style="margin: 0px 10px">
            <img style="margin: 0; height:65px;" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="lion head" />
                <div class="company-name">
                    <div class="text-center">Fake</div>
            <div class="text-center" style="font-size: 85%; margin-top: -20px;">Co.</div>
            </div>
            </a>

            <button class="navbar-toggler align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                    <span class="navbar-toggler-icon"></span>
            </button>
            </div>
            <div class="d-none d-md-block">
                <a class="navbar-brand company-name" href="#">Fake Company</a>
            </div>
            </div>
        </nav>

https://jsfiddle.net/zxjk3pLn/

Answer №2

Ensure that the .navbar-header element spans the full width by applying the following CSS:

.navbar-header {
  width: 100%;
}


.title-bar {
    padding: 0px;
    margin: 0px auto;
}
.company-name {
    font-family: "Trajan Pro";
    font-size: 36px;
    margin: 0px auto -15px 5px;
}
.navbar-nav {
    width: 100%;
}
#seal {
    margin: -50px auto;
}
.navbar-header {
  width: 100%;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-md bg-dark navbar-dark title-bar">
<div class="container-fluid title-bar">
<div class="navbar-header">
<div class="d-flex flex-row d-md-none">
<a class="navbar-brand d-flex" href="#" style="margin: 0px 10px">
<img style="margin: 0; height:65px;" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="lion head" />
<div class="company-name">
<div class="text-center">Fake</div>
<div class="text-center" style="font-size: 85%; margin-top: -20px;">Co.</div>
</div>
</a>

<button class="navbar-toggler align-self-center ml-auto" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="d-none d-md-block">
<a class="navbar-brand company-name" href="#">Fake Company</a>
</div>
</div>
</div>
</nav>

<nav class="navbar navbar-expand-md bg-secondary navbar-dark">
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="nav navbar-nav d-flex">
<li class="nav-item flex-fill text-center active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Profle</a></li>
<li class="nav-item flex-fill text-center">
            <img class="d-none d-md-inline" src="https://cdn.pixabay.com/photo/2016/02/08/10/10/coat-of-arms-1186256_960_720.png" id="seal" alt="coa" style="max-width:110px; width:50%" />
          </li>
<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Products</a></li>
<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Pricing</a></li>
<li class="nav-item flex-fill text-center"><a class="nav-link" href="#">Contact Us</a></li>
</ul>
</div>
</nav>
    <div class="d-sm-none">
      extra small
    </div>
    <div class="d-none d-sm-block d-md-none">
      small
    </div>
    <div class="d-none d-md-block d-lg-none">
      medium
    </div>
    <div class="d-none d-lg-block d-xl-none">
      large
    </div>
    <div class="d-none d-xl-block">
      extra large
    </div>

Answer №3

When the .container-fluid div is styled with display: flex, the elements nested directly inside of it do not automatically expand to take up 100% width. This issue specifically affects the .navbar-header element. If you try adding a colored background to .navbar-header, you'll notice that it doesn't fill the entire width of the .container-fluid element.

Although the .navbar-toggler is aligned correctly to the right within its parent, the main issue lies in the parent element not expanding properly. To address this, you can apply either width: 100% or flex-grow: 1 to the .navbar-header element. Both of these adjustments will ensure that the element fills the full width of its parent container. Personally, I prefer using flex-grow in this scenario since it aligns with the flex container concept, but either option will achieve the same result.

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

Is it possible for me to identify the original state of a checkbox when the page first loaded, or the value it was reset to when `reset()` was

When a webpage is loaded, various input elements can be initialized as they are declared in the HTML. If the user modifies some of the input values and then resets the form using reset(), the form goes back to its initially loaded state. I'm curious, ...

javascripthtmldom

(Material UI version 5) Custom global style enhancements

One of the examples in MUI is the Global style overrides: const theme = createTheme({ components: { // Name of the component MuiButton: { styleOverrides: { // Name of the slot root: { // Some CSS fontSize ...

cssreactjsmaterial-ui

Display an additional HTML page without altering the existing one

First of all, I would like to apologize for my poor English. Attending a French school didn't provide much opportunity to practice other languages. I have a header.html on my website that I am unable to modify because it is not owned by me. However, ...

javascriptjqueryhtml

Having trouble figuring out how to play an mp3 using the <audio> tag. The console is showing an error message that says, "Unable to decode media resource XYZ."

I've been frustrated while trying to make the HTML5 <audio> element function properly. My webpage has two elements - one serving a file from my server and the other serving the same file from a different source server: <audio preload="metada ...

djangohtmlaudiolocalhosthtml5-audio

Save user entries in a database array

I'm working on developing a platform for advertisements where users can create detailed profiles with images. To achieve this, I need to store the information in an array within a backend database for future retrieval. Below is an example of the backe ...

javascripthtmldatabasevue.js

What is the process for adjusting the font in my VS Code editor?

Currently diving into an Angular2 development video course, I stumbled upon something intriguing: https://i.stack.imgur.com/CIBcx.jpg Yes, aesthetically pleasing HTML attributes won't make me a coding genius. But let's be honest, who doesn&apos ...

htmleditorvisual-studio-codecode-formatting

Attempting to resolve the Bootstrap issue, currently in search of a suitable solution

Today I made the decision to utilize bootstrap to create a menu, but unfortunately, I've encountered a strange bug or conflict involving jQuery, potentially the UI, and Bootstrap. If you'd like, you can take a look at the picture provided in the ...

javascriptjqueryhtmlcsstwitter-bootstrap

Looking for a jQuery plugin that helps with form alignment?

In a blog post comment, I came across an interesting jQuery form alignment plugin: jQuery.fn.autoWidth = function(options) { var settings = { limitWidth : false } if(options) { jQuery.extend(settings, options); }; ...

jquerycssforms

Display a tooltip when you click on a different element

I have a unique feature that I want to implement on my website. The idea is to display a tooltip when a user clicks on a specific div with the same ID as the tooltip. This will be particularly useful for interactive questions where users can click and reve ...

jqueryhtmlcsstooltip

What could be causing the image not to appear on the React app?

I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...

htmlcssreactjsimagemern

"Utilizing Bootstrap to create a visually appealing image and text combination in the

I need to arrange the image, first span, and second span in a vertical stack for xs devices. The alignment should be centered for xs devices. If you want to see my code: CLICK HERE <div class="row"> <div> <div class="col-md-9 c ...

htmlcsstwitter-bootstrap-3

Configuring the interactive background for a textbox

How can I set a background image for a textbox that is clickable? I tried using a div tag with position:absolute positioned above the textbox, and included the image within it. However, the issue is that the image appears above the text. I attempted to a ...

htmlasp.netcsstelerik

Tips for managing post-generated buttons using jQuery?

I've created buttons using JavaScript and added them to my HTML. Now I want to use jQuery to handle the clicks on b_1 and b_2. How can I make this work? $("#mainbutton").click(function (){ document.getElementById("content").innerHTML = '< ...

javascriptjqueryhtml

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

javascripthtmlreactjs

Exploring CSS animations by utilizing the transform and color properties

I am currently working on a project that involves animating text (specifically "happy birthday to you") and a heart. The idea is for the heart to drop and hit each word one by one, turning them yellow upon impact. Once the last word is hit, the text shou ...

javascriptcssanimationsasscss-animations

Having issues with the <ul> tag not displaying correctly

I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...

htmlcss

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

JavaScript event listener 'click' not functioning properly

I'm facing an issue with a click event in a script that is associated with a specific div id. When I move the mouse within the div area and click (the cursor remains unchanged), the event listener does not activate. How can I make the div area clickab ...

javascripthtmlcss

Ensuring Consistent Item Widths in a Loop using JavaScript or jQuery

In my code, I created a function that dynamically adjusts the width of elements in a loop to match the widest element among them. // Function: Match width var _so20170704_match_width = function( item ) { var max_item_width = 0; item.each(function ...

javascriptjqueryhtml

How can I align a single button to the left side while positioning the rest of the elements to the right in Bootstrap 4?

I am attempting to align the B1 button on the left side and have the remaining elements positioned on the right side. Below is my code snippet using Bootstrap 4.1: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/b ...

csstwitter-bootstrapbootstrap-4