How to position navigation items to the right in Bootstrap 4

I've been struggling to align the Nav Items, specifically everything after the social media icons, to the right side of the screen. Despite trying multiple solutions, I just can't seem to figure it out!

Could someone please point out where I'm making a mistake?

Thank you so much for your assistance

<nav id="mainnavbar" class="navbar navbar-dark navbar-expand-md py-2 fixed-top">
  <img src="BGDlogo.png" width="32" height="32" alt="" loading="lazy">
<a href="#" class="navbar-brand" py-2>BLUE GECKO DIGITAL</a>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-linkedin"></a>
<a href="#" class="fa fa-instagram"></a>
<div class="d-flex flex-row order-3 order-sm-3">
  <ul class="navbar-nav flex-row">

  </ul>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navlinks">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-link">HOME</a>
        <li class="nav-item">
            <a href="#" class="nav-link">DESIGN</a>
        <li class="nav-item">
            <a href="#" class="nav-link">SEARCH</a> 
        <li class="nav-item">
            <a href="#" class="nav-link">SOCIAL</a>
      <li class="nav-item">
      <a href="#" class="nav-link">BRAND</a>    
        <li class="nav-item">
            <a href="" class="nav-link">BLOG</a>
        <li class="nav-item">
            <a href="#" class="nav-link">CONTACT</a>    
        </li>
    </ul>

</div>
</nav>
htmlcssbootstrap-4

Answer №1

Kindly refer to the code snippet comments for details on the changes made. A <div> and most of the <li> tags have been closed. The class justify-content-end has been added to the collapse class <div> to align the navigation items to the right.

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

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="afdfc0dfdfcadd81c5dcef9e819e99819f">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<nav id="mainnavbar" class="navbar navbar-dark navbar-expand-md py-2 fixed-top bg-dark">  <!-- Add bg-dark -->
  <img src="BGDlogo.png" width="32" height="32" alt="" loading="lazy">
  <a href="#" class="navbar-brand" py-2>BLUE GECKO DIGITAL</a>
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-linkedin"></a>
  <a href="#" class="fa fa-instagram"></a>
  <div class="d-flex flex-row order-3 order-sm-3">
    <ul class="navbar-nav flex-row">

    </ul>
  </div>  <!-- close the div here -->
  <button class="navbar-toggler" data-toggle="collapse" data-target="#navlinks" aria-label="Toggle Navigation">
    <span class="navbar-toggler-icon"></span>
</button>
  <div class="collapse navbar-collapse justify-content-end" id="navlinks"> <!-- Add justify-content-end here -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a href="#" class="nav-link">HOME</a></li> <!--Close <li> -->
        <li class="nav-item">
          <a href="#" class="nav-link">DESIGN</a></li> <!--Close <li> -->
          <li class="nav-item">
            <a href="#" class="nav-link">SEARCH</a></li> <!--Close <li> -->
            <li class="nav-item">
              <a href="#" class="nav-link">SOCIAL</a></li> <!--Close <li> -->
              <li class="nav-item">
                <a href="#" class="nav-link">BRAND</a></li> <!--Close <li> -->
                <li class="nav-item">
                  <a href="" class="nav-link">BLOG</a></li> <!--Close <li> -->
                  <li class="nav-item">
                    <a href="#" class="nav-link">CONTACT</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

Executing click on an HTML file element using a component in Angular 2

As a newcomer to Angular 2, I have a question: How can I trigger a click on an HTML file element from a component? rankingFilter() { this.RepsloaderShow = true; this.reps = []; var data = { from: this.fromFilter, to: this.to ...

htmlangular

Unable to modify the innerText of an element within a callback function

I'm working on creating a dynamic "reset" button that switches its text message back and forth in a loop. The first click changes it from "Reset" to "Are you sure?" and the second click changes it back to "Reset." However, I am having trouble updating ...

javascripthtmlbootstrap-5

Difficulty with font rendering across different web browsers such as Firefox, Chrome, and Opera

Visit the following website: I have implemented font-face on my site: @font-face { font-family: 'SegoeUI'; src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), url(' ...

cssfont-face

A rightward sliding submenu that appears upon clicking a button

I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...

htmlcssweb

Center the p tag vertically

To ensure the text inside the p tag aligns vertically in the middle, I've set a specific height for the tag. While this works perfectly for single-line text, it shifts to the top of the p tag when there are two lines of text. It's important to k ...

htmlcssparagraph

Striving to incorporate a Facebook like button onto a Sencha toolbar

The issue I'm facing is that the like button isn't visible on my webpage. Here's a snippet of the code: HTML file : . . . <body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElem ...

javascripthtmlsencha-touchsencha-touch-2

Expanding images to fit the div's width in Bootstrap

I've encountered an issue with my grid of resized images - the original images are larger than what can be accommodated by the Bootstrap grid setup. The problem arises when I decrease the width of my window - instead of maintaining the resized size a ...

htmlcssimagetwitter-bootstrap

Using relative paths to showcase images in Node.js

I am currently working on my first Node.js MVC app where I am using native Node and not utilizing Express. One issue I am facing is the difficulty in displaying images from my HTML files through their relative paths. Instead of sharing my server.js and ro ...

javascripthtmlnode.jsimagefiletree

Header that sticks to the top of a container as you scroll through it

Many questions arise regarding sticky elements in the DOM and the various libraries available to handle them, such as jquery.pin, sticky-kit, and more. However, the issue with most of these libraries is that they only function when the entire body is scro ...

jqueryhtmlcsssticky

Is there a way to update a div element with an image without having to refresh

Currently working on a project for my studies where I am reading the x and y coordinates from a touch pad and drawing it in real time using PHP. I have created a draw page that takes these coordinates and displays them on an image, which is then shown on ...

phpjavascripthtml

How can JavaScript be used to create a unique signup and login process on

I am struggling with storing sign up and login details in JavaScript. In my previous project, I used PHP and a database to handle this information, so transitioning to JavaScript has been challenging. Here is an example of the sign-up HTML code: <!DOC ...

javascripthtmlauthentication

Don't leap to the top of the page, take your time!

This is the question I have posed <a href="#" onclick="return false">show_all</a> I attempted onclick=preventDefault(); onclick="return false"; However, it is continuing to jump to the top of the page. Any recommendations on how to pr ...

javascripthtml

PHP Error Caused by HTML TableORPHP Th

This is a piece of code I have written if ($result!==false) { $html_table =<table align="center" border="1" cellspacing="0" cellpadding="10" width="1000" word-wrap="break-word" display="inline-block"> <tr><th>Bank</th><th>Pro ...

phphtmlmysqlhtml-table

Learn how to enable or disable a specific JavaScript script by clicking on a toggle button

I am currently exploring a new functionality for my basic tool that will introduce a "guided" approach to using it. The concept is simple: when a user selects a button, it will trigger the enablement and disablement of other buttons. However, I have real ...

javascripthtmljquery

How to use jQuery to extract a particular text from an anchor tag

If I want to choose a specific anchor text and make changes to it, I can do so by targeting anchors with a certain href attribute. For example, on a page with multiple unordered lists, each containing different links: <ul> <li><a href="v ...

javascriptjqueryhtml

What is the best way to showcase nested arrays in JSON by utilizing $.each?

I am currently facing an issue with a JSON file that contains five array fields for an article: id, title, body, cover image, and url. The problem lies within the body array, which has three embedded array objects (plaintext, pull_quote, and h2) that are n ...

javascriptjqueryhtmlarraysjson

Create an HTML element that has a 'floating' effect

Is it possible to have an HTML element like a span or div on the page that occupies no space? I want to be able to toggle its visibility without affecting the layout, such as having a label appear next to a table row when hovered over without taking up e ...

htmlcss

Exploring characteristics using DocumentTraversal

My goal is to list out the attributes of elements using DocumentTraversal specifically for IE11. While I have been successful in enumerating element attributes, I am facing an issue when trying to do the same with attributes. The enumeration stops at the f ...

javascripthtmldocumenttraversal

Tips for optimizing content loading without a full page refresh using Ajax

As a newcomer to the world of coding, I am currently working as a beginner webdev specialist. My boss has tasked me with enhancing the website in a way that only the inner content is reloaded when the page is refreshed while keeping the top panel, side bar ...

javascripthtmlajax

"Troubleshooting the non-functional :before pseudo-element in a Select-Box

I am having trouble with my CSS. Below is the code I am using: /*Custom Select Box*/ select#user_select { background-color: var(--white); float: right; color: var(--dark_grey); width: 30%; height: 3rem; padding-left: 3%; bord ...

htmlcss