I would like to display certain items on the right side of the navbar

 <div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul style="margin-left: auto">
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav><!-- .nav-menu -->

this code displays signup and login on the right side of the navigation menu.

javascripthtmlcsstwitter-bootstrapbootstrap-4

Answer №1

I have made the w-100 adjustment to expand the nav and fit it into the entire container. Additionally, I applied justify-content-between to position the children with equal spacing between them...

<div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex w-100 justify-content-between">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>         
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav>
</div>

For a visual demonstration, check out this pen: https://codepen.io/paulmartin91/pen/gOgJeJZ

Answer №2

There is a way to achieve this using only CSS with the :last-child selector

ul {
  display:none;
}

ul:last-child {
  display: block;
}
 <div class="container d-flex align-items-center">

  <nav class="nav-menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="index.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user"></i> login</a></li>
        
    </ul>
  </nav>
</div>

Answer №3

Include the float:right; CSS property

 <div class="wrapper d-flex align-items-center">

  <nav class="menu d-flex align-items-center">
    <ul>
      <li class="active"><a href="home.html">Home</a></li>
              
      <li><a href="#"><i class="fa fa-id-badge"></i> SUBSCRIBE</a></li>
        
    </ul>
     <ul>
     <li><a href="#"><i class="fa fa-id-user" style="float:right"></i> Sign Up</a></li>
      <li><a href="#"><i class="fa fa-id-user" style="float:right"></i> Login</a></li>
        
    </ul>
  </nav><!-- .nav-menu -->

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

Updating the content of text inputs within a form in Angular 2

Recently, I've been diving into Angular 2 and so far, I'm enjoying the experience. However, I could use some guidance to navigate this new territory. One specific challenge I'm facing is with a form for editing user details and a list of us ...

javascripttypescriptangularangular2-forms

Obtaining your CSGO inventory via Steam API using jsonp: A step-by-step guide

Hey there! I'm currently facing an issue while trying to access a player's CSGO inventory using Valve's API. Unfortunately, I keep running into the error message stating that no 'access-control-allow-origin' header is present on th ...

javascripthtmljsonapijsonp

Determining User Consent: A Straightforward Guide to Identifying Previously Accepted Cookie Consent

I've been tasked with adding a cookie to a website. The site only tracks the number of visits, so there is no user-specific data available for cookie assignment or acknowledgment tracking. Is it possible to show the cookie notification only to users ...

phpjqueryhtmlcookies

Screen goes dark after switching to full-screen mode (panolens.js/three.js)

Utilizing a library known as panolens for displaying a 360-degree panoramic view, hinging on three.js. Within my application, there are two views: one containing custom content and the other serving as a container for panolens. Initially, the first view is ...

javascriptthree.js

Design a personalized .OBJ / .MTL file and showcase it using the power of three.js

I attempted to create a basic blender model, export it to .obj/.mtl, and then render it with three.js. However, I am experiencing an issue. I have downloaded and uploaded the official three.js demo, and the objmtl-loader is functioning properly with the or ...

javascriptthree.jsexportblender

The excessive repetition in Angular flex layout is becoming overwhelming

I discovered and started using the responsive API provided by angular flex layout. While most of the time it works as intended, there are instances where I find myself duplicating directives in the code. Here's a simplified example: <div> &l ...

cssangularangular-flex-layout

Issues observed when integrating Axios custom instance with Next.js

Initially, I created a custom axios instance with a baseURL and exported it as shown below: import axios from 'axios'; const instance = axios.create({ baseURL: process.env.BACKEND_URL, }); instance.defaults.headers.common['Authorization& ...

javascriptreactjsaxiosnext.js

Protractor experiencing difficulty in adjusting price slider

As a newcomer to protractor, I am attempting to test a price slider that sorts products based on the provided price range. Unfortunately, I am facing difficulty in dragging the slider (min point) using protractor. Can anyone provide guidance on how to move ...

javascriptreactjsangularseleniumprotractor

Strip out the script tag from the data received in the AJAX response

I'm currently developing a single-page application using jQuery. The entire HTML pages are sent to the browser as an AJAX response. $.post(url, function (data) { $("#resp").html(data); $("#resp").find("script").each(function (i) { ...

javascriptjquery

Techniques for extracting batches of n records from a database cursor (collection)

I am on a quest to showcase groups of 3 documents from my "Questions" collection, which contains about 50 documents. The plan is to display the first set of 3 questions in the template and then provide the users with an option (by clicking a button) to eit ...

javascriptmongodbmeteor

Achieving PHP echo output in JavaScript

I currently have a PHP file stored on a server that is responsible for retrieving data from my database. <?php $servername = "myHosting"; $username = "myUserName"; $password = "MyPassword"; $dbname = "myDbName"; $conn = new mysqli($servername, $usernam ...

javascriptphpajaxdatabaseuserscripts

customize Form Modal Bootstrap with AJAX Chained Dropdown for pre-selected options

I am facing an issue with a chained dropdown on a bootstrap modal, Here is the code snippet: function changeDetail(id) { var id = id; $('#edit').prop('hidden', true); $('#modal_form').prop('hidden', fa ...

javascriptjqueryajaxdropdownchained-select

Nativescript apps are unable to utilize Node modules

I am currently facing an issue with integrating multiple plugins into my Nativescript application. The computed path to locate these installed plugins appears to be incorrect, and I am unable to locate any guidance on how to rectify this issue. Is there a ...

javascriptnpmpluginsnativescripttns

"Encountered a 400 Error while trying to access the OpenAI

var openairequest = new XMLHttpRequest(); const payload = ({ "model": "text-davinci-003", "prompt": "say this is a test" }); console.log(payload) openairequest.open("POST",`https://api.openai.com/v ...

javascriptjsonajaxopenai-api

The column headers are not being shown in Jquery datatables

This particular question is related to the thread found here. Nevertheless, my situation differs slightly. I am looking to implement the same datatables example from the aforementioned question, which can be accessed here. In that example, you must provide ...

javascriptjqueryajaxdatatable

Modify the base URL with JavaScript

Is it possible to dynamically change the href using JavaScript? I attempted to make this change with the code below in my HTML file, but unfortunately, it didn't work: <base href="/" /> <script type="text/javascript"> function setbasehr ...

javascripthtml

Using JQuery to duplicate and assign individual IDs to each clone

Currently, I am in the process of developing a straightforward web application. Users will enter information by selecting options from drop-down menus and typing text into designated fields. Upon completion, users can click on a "generate" button that will ...

javascriptjqueryhtmlforms

Using JavaScript to place a particular tag at a designated position

I have a string that looks like this: var txtstr='<p>Text 1</p><p>&nbsp;</p><p>Text &nbsp;2</p><p>&nbsp;</p><p>Text 3&nbsp;</p>'; I have an <img src=..../> tag and ...

javascripttypescript

Creating vibrant squares using HTML and CSS

My objective is to incorporate 3 input options for selecting the color, size, and amount of cubes. The image below showcases my peer's final project, but unfortunately, he refused to share the code with me. We were given a basic template to begin with ...

javascripthtmlcss

Displaying a second dropdown menu when the first option is chosen

I need help displaying a second select menu once an option in the first one has been selected. How can I achieve this using jQuery? Here is the code snippet: CSS: #2nd{visibility: hidden;} #a{visibility: hidden;} HTML: Please select: <select id ...

jqueryhtmlhidehtml-select