How can I align 2 ul-navbar items in the right navbar using Bootstrap?

Attempting to create an additional menu on top of the right menu using Bootstrap 4.6

My approach is to have: 2 navbar-nav elements with classes w-100 and float-right, so they would be 100% width and floating to the right.

However, this is not working as expected.

The red box represents my current progress, while the green box indicates my desired outcome.

https://i.sstatic.net/OdI3k.png

Here's what I've tried so far:

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                <a class="navbar-brand" href="#"><img height="50" src="https://dummyimage.com/150x75/000/fff&text=LOGO" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav w-100 float-right">
                <li class="nav-item ">
                    <a class="nav-link" href="#">FACEBOOK ICON</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">TWITTER ICON</a>
                </li>
            </ul>
            <ul class="navbar-nav w-100 float-right">
                <li class="nav-item active ">
                    <a class="nav-link" href="#">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DOCUMENTATION</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">EXAMPLES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">THEME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">EXPO</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">BLOG</a>
                </li>
            </ul>
        </div>
    </nav>

Appreciate any assistance!

htmlcssbootstrap-4

Answer №1

To optimize the code, consider removing the classes w-100 and float-right, and instead, include the flex classes from Bootstrap. I have provided explanations for the replacements in the comments.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
  <a class="navbar-brand" href="#"><img height="50" src="https://dummyimage.com/150x75/000/fff&text=LOGO" alt=""></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
  <div class="collapse navbar-collapse flex-column align-items-end" id="navbarCollapse"> <!-- Use these two classes to set flex-direction: column and align-items: end -->
    <ul class="navbar-nav"> <!-- Width property removed to prevent full width occupation without needing float -->
      <li class="nav-item ">
        <a class="nav-link" href="#">FACEBOOK ICON</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">TWITTER ICON</a>
      </li>
    </ul>
    <ul class="navbar-nav"> <!-- Width property removed to prevent full width occupation without needing float -->
      <li class="nav-item active ">
        <a class="nav-link" href="#">HOME</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">DOCUMENTATION</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">EXAMPLES</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">THEME</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">EXPO</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">BLOG</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

Tips for incorporating text into slider images

I need help adding text to my image slider. The slider is functioning properly, but I want text to accompany each image and I'm not sure how to achieve this. Below is the HTML code I have: <section id="banner"> <div class="banner-bg"&g ...

jqueryhtmlcss

Ways to repair the mat-tab header

Within my application, I have five mat-tabs each containing a large amount of data which requires scrolling. Is there a way to fix the header of the tab while allowing the content to scroll? I attempted adding position:fixed; and position:sticky within: ...

cssangularangular-material2

A guide on centering two elements vertically within a single table cell

I am facing an issue with a table that has 5 columns, all vertically aligned to the middle. The first 4 columns contain text that is properly aligned in the middle of the cell. However, the last column is a bit different as it consists of two divs. The fir ...

htmlcss

Setting initial values for multiple elements in JavaScript

Attempting to set default values for DOM elements with JavaScript involves checking if the field value is empty. If it is empty, the value should be changed to 0; otherwise, no action is needed. Text fields: <input class="field" type="text" name="feat ...

javascripthtml

Using AngularJS to create a custom ng-template with ng-messages-include functionality

I am attempting to generate a script containing text/ng-template in order to store my error message template within $templateCache. My goal is to have this script file located remotely, separate from the HTML code. <script type="text/ng-template" id="e ...

javascripthtmlangularjs

Creating a CSS Box Along the Border of Another Box: A Step-by-Step Guide

Is there a way to render a box on another box's border, similar to the example image here: Expected Output I attempted using flexbox to achieve this, but unfortunately wasn't successful in finding a solution. If you have any advice or suggestio ...

htmlcssflexboxfrontend

How to retrieve text from the <td> element with Selenium

Currently, I am trying to extract the value enclosed within the <td> tag containing 30.0000 from a table using Selenium. However, every time I attempt to retrieve it, I receive 0.0000 instead. The method I have used so far is findElementByXPath(".//* ...

c#htmlselenium

What is the reason my CSS formatting isn't being applied in Vue.js?

As a newcomer to web development and vue.js, I've been struggling to style my code effectively. Below is an example of my vue.js code where I have created markup for a profile description using figure, figcaption, and image elements. Could you please ...

cssvue.js

Malfunctioning Line in Apple Safari Causing ReactJS Issues

I am encountering an issue with my <div className={`${classes.center} ${classes.or}`}>OR</div>. It appears that this problem is specific to Apple Safari only. The alignment on the right side seems to be broken, although it works fine on Google ...

cssreactjsmaterial-uijss

CSS unexpectedly transitions away

Check out this link for additional details As the cursor moves away from the element, it swiftly reverts back to its original form (I've demonstrated this in the video) .productinfo { display: flex; flex-direction: column; align-items: c ...

htmlcsstransition

Learn how to send HTML form data to a Django server and instantly show the results using AJAX for real-time updates

I am looking to create a form submission and display functionality similar to what is shown on this website. In my HTML form, I do not have a submit button; instead, I am using jQuery to detect the onchange event in each input field and submit the form dat ...

javascripthtmljquerydjangoajax

Having issues with Jquery's ".fadeIn('slow')" function not properly loading the <tbody> element in Internet Explorer

I divided my table into two parts, <thead> and <tbody>. The <thead> is always displayed on the page, while the <tbody> is initially set to "display:none" and loads with content when a button is clicked. To load the <tbody>, I ...

jqueryhtmlcssinternet-explorer

Is JQueries Live functionality compatible with IE8?

Incorporating the JQuery fancy box, I have implemented a pop-up form with select fields that dynamically update a span element upon selection change. Although it works well thanks to fellow Stack Overflow users' help, it unfortunately does not functio ...

javascriptjqueryhtml

The issue with binding arises when attempting to bind in nested elements within an ng-repeat loop

Here is the code snippet I am working with: <div class="list-group"> <a href="#" class="list-group-item" ng-repeat="user in users"> <h4 class="list-group-item-heading">{{user.FirstName}} {{user.LastName}}</h4> <p class=" ...

javascripthtmlangularjsmodel-view-controllerangularjs-ng-repeat

Having trouble getting the styles property to work in the component metadata in Angular 2?

Exploring Angular 2 and working on a demo app where I'm trying to apply the styles property within the component metadata to customize all labels in contact.component.html. I attempted to implement styles: ['label { font-weight: bold;color:red } ...

htmlcssangulartypescript

What is the best way to align bullet points in CSS lists?

These bullet points in my list are not aligned properly, and I am looking for a way to make them even. I remember finding a solution before, but I can’t seem to locate it now. Any assistance would be greatly appreciated. ...

htmlcsslist

Enhance Pagination Elements in WooCommerce by Adding Class Names

When trying to utilize Boostrap 4 classes with WooCommerce pagination, I encountered difficulty in adding custom class names. Upon inspecting the pagination.php file, I found the following code: $total = isset( $total ) ? $total : wc_get_loop_prop( &ap ...

phpwordpresstwitter-bootstrapwoocommercebootstrap-4

Using JavaScript, conceal a specific Div by examining the content within another Div

I am attempting to implement some logic using JavaScript. The goal is to hide the "cart-button" div if the innerHTML value of a div with the class "b-format" is set to Audio, otherwise hide the "more-button" div. However, for some reason this functionality ...

javascripthtml

When the browser window is resized, the footer starts to cover the content

To prevent the divs from overlapping when the browser window is resized vertically, take a look at the code snippet below: <html> <body> <style> #box { display: flex; flex-direction ...

htmlcssflexbox

What is the best way to accurately adjust the position of a flex item?

In the following scenario, where two elements are structured like this: <main style="display:flex; align-items: center;"> <div>1</div> <div>2</div> </main> Is there a way to adjust the position of div 2 ...

htmlcssflexbox