Tips on positioning only one list item on your Bootstrap navbar to the right

I am currently learning to code with HTML and am attempting to create a navigation bar with some list items on the right side and some on the left. Although I'm using Bootstrap, I am unable to figure out how to move only the 'contact' item to the right side of my navbar. Has anyone encountered this issue before and can provide guidance? I have explored other solutions on this platform but haven't found a resolution yet. Do I need to make 'contact' its own unordered list?

I have experimented with float:right and justify-content: end, however, they shift the entire content within the ul class. The same happens when I apply ms-auto. When I try these techniques within the li class, nothing changes. Adding padding also doesn't affect the placement. My specific goal is to align 'contact' to the right side of the navbar while keeping 'About', 'My Account', and 'Login' unaffected. Please disregard the current naming conventions in my HTML file.

Below is the snippet of my code:

`    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img src="images/circle_r.png" width="30" height="30" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home </span></a>
                </li>
                <li class="nav-item float-left">
                    <a class="nav-link" href="tenant.html">Login/Sign-Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="proprietor.html">My Account</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>

    </nav>`
htmlcssbootstrap-5

Answer №1

To reposition the "Contact" link to the right side of the navbar, you can add a class to the ul element and adjust the alignment using CSS. Here's a simple way to achieve this:

Start by adding a class to the ul element, such as . Using the ml-auto class from Bootstrap will automatically align the elements to the right.

In your CSS stylesheet, create a rule to modify the justify-content property of the class you added to the ul element. Here's an example:

.ml-auto {
    justify-content: flex-end;
}

After applying these changes, your updated code will look like this:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="#">
            <img src="images/circle_r.png" width="30" height="30" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home </span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="tenant.html">Login/Sign-Up</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="proprietor.html">My Account</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact.html">Contact</a>
                </li>
            </ul>
        </div>

    </nav>

Answer №2

To position the element on the right side of the navbar, you can use the CSS property position: absolute;. I've included a class contact for the li element to apply the necessary styling. Make sure to set the parent element to position: relative; as it will act as the container for the contact li. The flex properties were added for alignment, but feel free to adjust padding and spacing.

.navbar-nav {
  display: flex;
  gap: 2rem;
  background: lightgrey;
  position: relative;
}

.nav-item {
  list-style-type: none;
}

.contact {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 1rem;
}
<ul class="navbar-nav">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home </span></a>
  </li>
  <li class="nav-item float-left">
    <a class="nav-link" href="tenant.html">Login/Sign-Up</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="proprietor.html">My Account</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="about.html">About</a>
  </li>
  <li class="nav-item contact">
    <a class="nav-link" href="contact.html">Contact</a>
  </li>
</ul>

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

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

For my project, I utilized ng-include to insert HTML content. Within the included HTML, there is a side navigation panel that I only want to display in one specific HTML file and not in another. How can I achieve this? This is what I included: <div ng ...

javascriptjqueryhtmlangularjs

Using HTML5's getCurrentPosition function with Meteor

Attempting to utilize the html5 geolocation api within Meteor. Executing: navigator.geolocation.getCurrentPosition(handle_geolocation_query); in my javascript code but encountering issues - suspect it could be tied to the restrictions on timing ( ) enfo ...

htmlgeolocationmeteor

Using JQuery and Ajax, what is the best way to transfer information from a popup form to a PHP page?

I've noticed that my question has been asked a few times already, but I'm still struggling to get my code working. It seems like I'm using the same code as those solutions, so I can't figure out what's going wrong. Currently, I am ...

phpjqueryhtmlajax

Merge two separate Vue applications into one cohesive application

I have developed two separate Vue apps independently from each other. User Interface Admin Interface Each app has its own routes, store, configs, etc. I came across this helpful comment here which discusses treating each app as a component within a mai ...

javascripthtmlvue.jssingle-page-application

Scrolling and hovering now triggers the fixed button to toggle class seamlessly

Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...

javascripthtmljquerycssbutton

The MySQL query is returning a blank result with only the column headings displaying

I have been working on improving my skills in PHP and AJAX by developing an application that enables users to search a database for real-time product stock information. Currently, I am facing an issue where the headings are displayed when a user types a le ...

phphtmlcssmysqlajax

When errors occur while printing HTML through an Ajax request, it can hinder the functionality of other JavaScript code

I recently conducted an interesting experiment on my website. The concept involved sending an AJAX request to a PHP file, which then retrieved a random website by using various random words for search queries on Google. The retrieved website content was th ...

javascriptphpjqueryhtmlajax

React frontend communicating without backend server

Is it possible to send a message between two frontend users on web applications built with React? ...

javascripthtmlreactjs

I'm having trouble retrieving and rendering data in HTML using AngularJS and Spring

After fetching the data, I am unable to see it in the HTML code. The web browser console displays the JSON data but it is not visible in the HTML code. Here is my AngularJS code: $scope.refresh = function(){ fetchData(); }; $scope.fetchData = functio ...

htmlangularjsspringfrontend

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

In my current project, I am using CSS columns to establish a two-column layout for an unordered list. Here is the code snippet: HTML <div class="meta-data"> <ul> <li><i class="fa fa-chevron-right fa-xs"></i><str ...

htmlcsshtml-lists

filtering out specific sections of HTML using xPath

I am currently attempting to scrape information from this page My approach involves using xPath to select specific elements. Here is a snippet of my code: $safeFlag = true ; //*[@id="tabset_productPage"]/dd[1]/div/div //HAVE TRIED THIS TOO //*[@id="tab ...

phphtmldomxpath

Conceal the Standard Select Dropdown Arrow in Internet Explorer 9

VIEW DEMO I attempted to use the CSS property appearance: none; to hide the select dropdown arrow, but it still shows in IE9. Refer to the image for clarification. Does anyone have a solution to hide the arrow using either CSS or jQuery? Below is my cod ...

jqueryhtmlcssinternet-explorer-9

Is there a way to prevent tags from wrapping and showcase them all in a single line when utilizing the jQuery select2 plugin?

I have a requirement to prevent tags from wrapping and instead display them in a single line using the jQuery TagIt plugin. Check out my preview: https://i.stack.imgur.com/lYhsi.png My goal is to have all the tags displayed on a single line without wra ...

javascripthtmljquerycssjquery-select2

I'm having trouble viewing my display:table-cell content because Internet Explorer is hiding it

I am attempting to align an icon vertically centered and far right inside a container. I currently have code that achieves this using ::after and table-cell properties. However, the content does not display in Internet Explorer. If I remove the display:tab ...

cssinternet-explorercss-tables

Populate the containing div with an image element

I am looking to fill a parent div with an img, but I want the image to be a standalone img element inside the div, rather than setting it as a background property. To clarify, instead of this: div { background-image: url('someimg.jpg'); ...

htmlcss

Creating customized placeholders using CSS padding in HTML5

I came across this helpful post and attempted various methods to adjust the padding for my placeholder text, but unfortunately, it seems unwilling to cooperate. Below is the CSS code. (EDIT: This CSS was generated from SASS) #search { margin-top: 1px; ...

htmlgoogle-chromewebkitcss

Pressing the 'Enter' key within a textarea in a JQuery

This question seems fairly straightforward. I have a text area where hitting "enter" submits the content. Even though I reset the text to "Say something..." after submission, the cursor continues to blink. Is there a way to require the user to click on ...

javascripthtmlajax

A JavaScript pop-up box with two windows

Struggling to create two separate dialog boxes using this code. The issue is that when I add the code for the second dialog box, it only appears if the first one does too. Here's the code for the first dialog: function showPopUp(el) { var ...

javascripthtml

Modal Pop-ups Failing to Open on Subsequent Attempts

My table consists of buttons on the right-hand side for a menu. The first button in the menu is supposed to open a modal box upon clicking. However, the first buttons in the subsequent rows do not function as expected and fail to open the modal. Refer to t ...

javascripthtmlcss

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

htmlcssnode.jsexpressejs