Bootstrap Navbar and Flexbox items not aligned properly at the ends

Struggling to align items on Navbar? Here is my current setup: https://i.sstatic.net/Doc9A.jpg

I'm trying to position the flag image next to the toggler button, only when the screen reaches 992px breakpoint.

It seems like Bootstrap Stylesheet is using justify-content: space-between;. I've attempted using align-self: flex-end !important; on both flag and button, as well as trying justify-content-end.

Check out my Codepen example - https://codepen.io/jvern22/pen/gZjJBN

My Nav code: 

  <div class="container container-navbar">

    <a class="navbar-brand" href="index.php">Website title</a>
    <a class="navbar-brand justify-content-end" href="#"><img src="assets/img/spain.png" class="navbar-flag"></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="top-navbar-1">
      <ul class="navbar-nav justify-content-end">            
        <li class="nav-item"><a class="nav-link" href="?page=taketour"><?php echo $lang['nav_takeatour']; ?></a></li>
        <li class="nav-item"><a class="nav-link" href="?page=websites"><?php echo $lang['nav_websites']; ?></a></li>
      </ul>
    </div>        

  </div>
</nav>
htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve the desired layout, you have two options. The first option is to enclose the flag and navbar button within a div element, either by following the guidance provided in this CodePen, or by using the code snippet below:

html {
  height:100%;
  box-sizing: border-box;
}

body {
  min-height:100%; 
  padding:0; 
  margin:0; 
  position:relative;
  font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
  text-align: center;
  overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}

.bg-dark {
  background: #000 !important;
  color: #fff;
}

.bg-dark a {
  color: #aaa;
}

/* Additional CSS styles go here */

@media (min-width: 992px) and (max-width: 2200px){

  .navbar-flag {
    display: none;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>


<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
    
      <div class="container container-navbar">     
        <a class="navbar-brand" href="index.php">Website title</a>
        
        <div>
          <a class="navbar-brand justify-content-end" href="#"><img src="
https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        
        <!-- Navigation links go here -->

      </div>
    </nav>

The second option is to modify the parent div's justify-content property from space-between to flex-end, and then add margin-right: auto to the first navbar-brand. You can refer to this CodePen for a visual demonstration, or use the following code snippet:

html {
  height:100%;
  box-sizing: border-box;
}

body {
  min-height:100%; 
  padding:0; 
  margin:0; 
  position:relative;
  font: 400 15px "Open Sans", sans-serif;
line-height: 30px;
  text-align: center;
  overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
a.navbar-brand:first-child {
    margin-right: auto;
}
.bg-dark {
  background: #000 !important;
  color: #fff;
}

.bg-dark a {
  color: #aaa;
}

/* Additional CSS styles go here */

@media (min-width: 992px) and (max-width: 2200px){

  .navbar-flag {
    display: none;
  }
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark navbar-no-bg" role="navigation">
    
      <div class="container container-navbar">
      
        <a class="navbar-brand" href="index.php">Website title</a>
        <a class="navbar-brand justify-content-end" href="#"><img src="
          https://i.imgur.com/TXhhmGb.png" class="navbar-flag"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-1" aria-controls="top-navbar-1" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        
        <!-- Navigation links go here -->

      </div>
    </nav>


    <!-- JavaScript libraries include jQuery and Popper.js -->
  </body>
</html>

Answer №2

An effortless way to solve this issue is by enlarging the first flex item, causing all other items to shift to the right. You can achieve this by simply incorporating the following CSS code:

.navbar-brand:first {
  flex-grow: 1;
}

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

Guide to transforming a vertical tabbed content panel into a responsive collapsible using media queries and jQuery

I am in the process of creating a new content navigation design that incorporates vertically stacked tabs to toggle hidden panels adjacent to the tabs. Unfortunately, this layout seems to encounter issues at narrower screen widths. Check out my work on Fi ...

javascriptjquerycssresponsive-designmedia-queries

Is it possible to resize an object using JavaScript?

Is it possible to change the size of an object when loading specific data by clicking on navigation? <object id="box" width="250" height="250" data=""></object> Although the JS code loads the data, it does not change the size. document.getEl ...

javascriptjqueryhtmlcss

Having difficulty adjusting the padding of the Material UI table

I have been using the Table component provided by the material-ui library in my React project. However, I have encountered an issue where each row, including the header, has a padding of 24px on the top and bottom that I am unable to modify or overwrite. D ...

cssreactjsmaterial-ui

Seamlessly transition between various states within a React component for a fluid user experience

I'm currently working on a simple component structured like this: var component = React.createClass({ render: function(){ if (this.props.isCollapsed){ return this.renderCollapsed(); } return this.renderActive() }, ren ...

javascriptcssreactjscss-transitions

Why is it that all the columns seem to be stacked into just one column?

I've encountered an issue while trying to slice an image using HTML/CSS. My form, which I want to display in 3 columns, instead appears in a single column. The only time it works as intended is when I place my form and another div in the command sect ...

htmlcssbootstrap-4

Strange Behavior of HTML5 Audio Elements

I'm currently in the process of designing a shop website with a nostalgic Windows98 theme. On the product's page, I want to include a preview of audio. Here is the CSS code that I have used for the HTML5 audio element: audio::-webkit-media-contr ...

htmlcssaudio

The navigation underline stays in place even after being clicked, and also appears below

Take a look at this js fiddle I've managed to create the underline effect on the navigation links when the user hovers over them. However, the underline only stays visible until the user clicks elsewhere on the screen. How can I make it persist as l ...

javascripthtmlcsstwitter-bootstrapangular

The image slideshow on W3 Schools displays images in a stacked formation

Utilizing this code snippet from W3 Schools to incorporate an image slideshow into my web project. However, upon page load/reload, the images appear stacked vertically rather than horizontally (one above and one below). The slideshow functions properly aft ...

javascripthtmlcss

Blurring the boundary of Slick's carousel with a fade effect

Currently, I am utilizing the Slick Carousel plugin developed by Ken Wheeler. In the image provided below, you can observe that when a slide is transitioning at the edge, it appears to be abruptly cut off. I am contemplating the implementation of a "fading ...

javascriptjqueryhtmlcss

Switching text and updating form action on button press using jquery

My current issue is that the button on my form is only partially working. Initially, it displays 'add' and directs to the 'add.php' file, but upon clicking the button, the text does not change and the submission doesn't go to the & ...

jqueryhtmlforms

How can you reset the chosen option in a Vue.js dropdown menu?

Within my dropdown menu, I have included a button that is intended to clear the selected city. Despite adding an event, the selected option is not being cleared. Can anyone provide insights on what I might be missing? Thank you in advance. Below is the bu ...

javascripthtmlvue.jsvuejs2

Display fixed information in a separate tab using express and ejs

I have an Express app that is running smoothly with a MongoDB backend, and it's able to render tables with data flawlessly. However, I've encountered an issue when trying to export a table from my database. The exported table looks something like ...

javascriptjqueryhtmlnode.jsexpress

Exploring nodes with the help of Cheerio JS

In my HTML code, I am using the Snekfetch library to fetch data. Here is a snippet of the code: <div class="entry-content"> <h4>today's date etc etc</h4> <h3>category name 1</h3> <p> <img class=" ...

jqueryhtmlcheerio

Selenium's xpath feature is designed to target only the elements that are currently visible

When using Selenium xpath, it only matches visible elements on the HTML page. Even though there are many other elements present but not visible, the xpath will only return those that are currently visible. This is in contrast to checking the xpath in the ...

javahtmlgoogle-chromeseleniumxpath

Struggling to locate elements with Python selenium

Just starting out with Selenium and attempting to extract data from a particular website: . This site stores information on hotels across the United States. My main objective is to compile this data into a CSV file where each entry would have a 'State ...

pythonhtmlseleniumweb-scraping

Content refuses to show up on my social networking website project when Ajax is employed

I've been working on a Social Media website for a major project, and I recently implemented Ajax to load posts. However, I'm facing an issue where the content is not displaying on the index page after implementation. My goal is to load 10 posts a ...

phpjqueryhtmlajax

Having trouble with input event listeners in JavaScript?

I've been attempting to trigger the keyup event using EventListener for an input tag, but it doesn't seem to be working and I'm unsure why. Here is the code I have: document.getElementById("ajax").addEventListener("keyup", function() { ...

javascriptjqueryhtmlinput

Ways to interact with a button that toggles between states

I am working with a button that has both an enabled and disabled state. Enabled State: <button type="button" class="btt-download-csv site-toolbar-menu-button icon-download no-icon-margins ng-isolate-scope" title="Download CSV" rc-download-csv="" curren ...

pythoncssselenium

Continue to run upon clicking the button in the Document Object Model

I want the code to constantly change instead of executing only once. By default, the button has a dark mode for text and the background color is pink. When you click the button, the background color changes to black and the text in the button turns into li ...

javascripthtmldom

embedding fashion within offspring component in vue

Looking to apply inline styles to a child component? I am trying to pass properties like height: 200px and overflow-y: scroll. I attempted passing it this way: <Childcomponent style="height: 200px; overflow-y: scroll;" /> but had no luck. ...

javascripthtmlcssvue.js