Ways to align Navbar Elements in the middle position

I am struggling to move 'Try again' between 'New Colors' and 'Easy' to the center of the navigation bar. I have attempted using flexbox and other techniques without success. Additionally, I would like this layout to be responsive.

<nav class="navbar navbar-expand navbar-light">
  <div class="container">
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-md-5 pl-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >NEW COLORS <span class="sr-only">(current)</span></a
          >
        </li>
      </ul>
      <ul class="navbar-nav d-flex justify-content-center">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >Try Again <span class="sr-only">(current)</span></a
          >
        </li>
      </ul>
      <ul class="navbar-nav ml-auto pr-md-5 mr-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#"
            >EASY <span class="sr-only">(current)</span></a
          >
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">HARD</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
htmlcssbootstrap-4

Answer №1

To achieve alignment of nav items to the left, center, and right, add the classes d-flex and justify-content-between to the 

<div id="navbarSupportedContent">
. Next, remove the class ml-auto from the last <ul navbar-nav>.

<div class="collapse navbar-collapse d-flex justify-content-between" id="navbarSupportedContent">
     ...
<ul class="navbar-nav pr-md-5 mr-md-5"> <!-- Remove ml-auto -->


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<nav class="navbar navbar-expand navbar-light">
  <div class='container'>
    <!-- Add in d-flex and justify-content-between -->
    <div class="collapse navbar-collapse d-flex justify-content-between" id="navbarSupportedContent">
      <ul class="navbar-nav ml-md-5 pl-md-5">
        <li class="nav-item">
          <a class="nav-link" href="#">NEW COLORS <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav"> <!-- Remove d-flex -->
        <li class="nav-item">
          <a class="nav-link" href="#">Try Again <span class="sr-only">(current)</span></a>
        </li>
      </ul>
      <ul class="navbar-nav pr-md-5 mr-md-5"> <!-- Remove ml-auto -->
        <li class="nav-item">
          <a class="nav-link" href="#">EASY <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">HARD</a>
        </li>
      </ul>
    </div>
</nav>
</div>

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

Ways to create a rotating effect using CSS and Angular

I'm working with Angular and I have a question: How can I make this icon rotate when I click on it? <div class="col-lg-1 col-md-4 col-sm-2 col-2 alend-text"> <i class="pomrgto iconfa fas fa-chevron-circle-right view_cir ...

htmlcssangular

Utilize the display property with grid to effortlessly expand a block to occupy the entire width

I am currently exploring the grid system and I have a specific challenge. I would like the third block to expand to its full width without the need for extra classes. Can this be achieved using only internal CSS? .grid { margin: 36px auto; height: ...

csscss-grid

Tips for minimizing the spacing between a label, span, or paragraph that causes the text to wrap

I recently created a label with text inside it. However, when I shrink the screen size, the label splits into two lines but the spacing between them is too wide. How can I narrow down this space? Below is the code snippet: <div class="col-xs-12 textA ...

htmlcss

What are alternative methods for creating a table layout without relying on traditional table elements?

Is there a way to eliminate tables from my code and achieve the same layout in the name of progress and learning? Here is an example of the table I currently have: <table cellspacing="0px"> <tr> <td> <img src= ...

htmlcsshtml-table

Storing Jquery result in a variable in Angular

Within my Angular component, I have a folder structure that needs to retain its previous state (which folder was open) even after reloading due to CRUD operations. https://i.sstatic.net/z44k6.png The API sends back a nested response utilized for generati ...

htmljquerycssangular

Incorporating additional options onto the menu

I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...

javascripthtmlcss

Incorporating a File Attachment within a JSON Structure

Can a file attachment be included in a JSON Object? I am working on an HTML Form with text field inputs and a file attachment, and I would like to send all this form data (including the file attachment) as a JSON Object to the server. Are there any specif ...

javahtmljsonfile

How can I extract the text enclosed in <li> tags using JavaScript?

Can someone help me with retrieving the text content of li tags? I managed to get a list of lis, but I'm having trouble assigning the text content to my country object. Snippet var lis = document.getElementById("navbar").getElementsByTagName("l ...

javascripthtmlhtml-lists

Is it possible to customize the Menu hover effect in Element Plus and Vue?

Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover e ...

javascripthtmlcssvue.jshover

Integrate a three.js scene seamlessly into the background of a webpage

I have successfully created two separate HTML documents—one where a three.js scene is rendered and a basic HTML page. Now, my query is how to effectively combine them. My aim is to display a rotating green cube in the left corner and a moving red cube th ...

htmlthree.js

Select only the immediate descendants of a div that are not images

Can we select only the immediate children of a div excluding images? Is there a way to achieve this using the :not-selector or any similar method? For example: http://codepen.io/anon/pen/hlrAg Incorporating a media query, I want to apply left/right-padd ...

csscss-selectors

Issues with Bootstrap glyphicon not functioning correctly on mobile devices and Internet Explorer

Within my template, there is a navigation button positioned on the left side of the page that remains fixed as the user scrolls down. When clicked, this button triggers a menu to appear. Embedded within this button is a bootstrap glyphicon: <div class ...

htmlcsstwitter-bootstrap

Choose not to alter the display value during keyup and keydown events, while still triggering the change event

$(function(){ $(".cls_user_details select").keyup(function(){ $(".cls_user_details select").val("Profile"); }) }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cls_user_setti ...

javascriptjqueryhtml

Create space in the bootstrap framework between an image and text

I'm trying to increase the space between the title/description and the icon image in my Bootstrap CSS layout. I attempted adding ms-5 to the div tag, but it didn't have the desired effect. NOTE: Please refrain from suggesting margin-right:5px as ...

htmlcssbootstrap-5

Altering CSS styles through JavaScript or jQuery

Exploring Options After investigating the use of .css() to manipulate CSS properties of specific elements, I came across a website showcasing the following CSS: body, table td, select { font-family: Arial Unicode MS, Arial, sans-serif; font-size: ...

javascriptjquerycssstyles

Implementing AngularJS drag and drop functionality in a custom directive

I am in search of an example that demonstrates similar functionality to the HTML5 File API using Angular-js. While researching directives for Angular 1.0.4, I found outdated examples that heavily rely on DOM manipulation. Here is a snippet of the pure Ja ...

javascripthtmlfile-uploadangularjsangularjs-directive

Struggling to center divs in HTML and CSS but running into issues on mobile devices?

I've been facing some serious CSS issues lately! Currently, I have everything set up to center the #Box div, which works perfectly on all devices except for mobile browsers. The problem arises because the screen size of the mobile browser is too narr ...

iphonecsshtmlcenter

Utilizing Bootstrap 4 to Wrap Text Around Images

Concerning Bootstrap 4: Examine this HTML/CSS code that is not currently responsive (missing Bootstrap "col-"). The Lorem Ipsum text wraps around the image on the right side and below it due to float-left. <img class="pr-3 pb-3 float-left" src="~/Im ...

htmlcssbootstrap-4

What is the best way to place a dropdown menu in front of buttons?

Here is an example snippet of HTML code that showcases a SweetAlert2 date picker popup for a button titled "Click me!": <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf ...

htmlcssbootstrap-5sweetalert2vanillajs-datepicker

New programmer seeking to apply a dim effect to the entire photo while also adding a highlight when the image is hovered over

I am looking to add a special effect to my photos where they appear dimmed but highlighted when hovered over. Any guidance on how to achieve this would be greatly appreciated! The image is contained within a flexbox div that also contains a clickable lin ...

htmlcss