Float one navbar item to the right in Bootstrap4 and maintain center alignment for the links

I'm attempting to align the "login with discord" text and image to the right while keeping the other 2 navbar links centered. However, every time I try to float it right, the centered content/nav items get shifted to the left by the width of the "login with discord" button. My goal is to float it right without affecting the center content position. Below is my code snippet.

<body class="text-center">
<div class="cover-container d-flex h-100 p-3 mx-auto flex-column">
  <header class="masthead mb-auto mr-auto ml-auto">
    <div class="inner">
      <nav class="nav nav-masthead justify-content-center">
        <a class="nav-link active" href="#">Home</a>
        <a class="nav-link" href="features.html">Features</a>
        <a class="nav-link" href="#"><img src="../img/discordnav.png"></img> Login With Discord</a>
      </nav>

    </div>

  </header>

Check out the site/preview link here -

htmlcssbootstrap-4css-floatnavbar

Answer №1

To complete the task, simply modify the following CSS code by setting the last child element to have an absolute position and the header to have a relative position. If you want it to be even further right, consider removing the max-width property or setting it to unset for the ".cover-container".

a.nav-link:last-child {
    position: absolute;
    right: 0;
}
.masthead {
    position: relative;
    width: 100%;
}

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

How can I dynamically alter the color of a table row without using _rowVariant?

I am utilizing a bootstrap-vue table to showcase information retrieved from a JSON file. One piece of information I receive is an integer labeled "Status", and I aim to adjust the row's color based on this variable. For instance, if the Status equals ...

javascripthtmlvue.jsbootstrap-4bootstrap-vue

Bootstrap Framework 3 causing horizontal scroll due to header styling

Here is the link you requested: This is the HTML Code: <header id="header-10"> </div><!-- /.header-10-top --> <!-- MAIN NAVIGATION --> <div class="header-10-main"> <div class="container"> ...

htmlcssresponsive-designtwitter-bootstrap-3

"Incorporate countless Bootstrap 4 carousels into one webpage for an enhanced user

I'm experiencing difficulties with the new Bootstrap 4. Can anyone provide guidance on how to incorporate multiple Bootstrap carousels into a single page? I've researched several websites, but most only offer solutions for Bootstrap 3. Your assi ...

javascripthtmlcssbootstrap-4

I'm feeling lost trying to figure out how to recycle this JavaScript function

Having an issue with a function that registers buttons above a textarea to insert bbcode. It works well when there's only one editor on a page, but problems arise with multiple editors. Visit this example for reference: http://codepen.io/anon/pen/JWO ...

javascriptcss

What is the best way to utilize document.body in order to add a table to a designated DIV?

Once I make a copy of the table, my goal is to insert this new table into a designated DIV named div1. How can I add the new table to div1? <div id="div1"> </div> var copiedElement = document.getElementsByTagName("table" ...

javascriptphphtml

Tips on how to ensure the navigation menu is the same size as its child elements in the navigation menu

I'm currently designing a navigation menu that includes a child navigation menu. My goal is to have the size of the main navigation menu match that of the child navigation menu. To achieve this, I've created three hyperlink tags followed by a di ...

htmlcss

Attempting to incorporate images alongside menu items

Here is a list of menu items. Please take note that I have assigned the image class to the City menu item. <p:submenu label="Address"> <p:menuitem value="Country" url="/secured/country.xhtml?redirect=true" /> <p:menuitem value="Stat ...

htmljsfprimefaces

What is the best way to choose table rows in polymer?

I need help with selecting a different tablerow when clicking on a button using Polymer. Below is my current code: <h1 class="page-title">Rooster ( {{username}} )</h1> <table> <tr> <th>Datum:</th> <th>B ...

javascripthtmlpolymer

Create a PDF document using HTML code stored on a separate component within an Angular 2 application

I am facing an issue with my parentComponent and childComponent setup. Specifically, I have a button called downloadPDF in the parentComponent that is supposed to trigger a PDF download from the HTML code of the childComponent without displaying the childC ...

javascripthtmlangularjspdfjspdf

Is it possible to pass a random variable into an included template in Jade?

In my jade template called 'main page', I have a reusable template named 'product template'. The 'product template' is designed to display dynamic data and needs to be flexible enough to be used in multiple pages without being ...

javascripthtmlpug

Creating a wider bottom border than the div width with CSS

Currently, I am customizing a blog theme and I am aiming to add a subtle separation between each individual post using a thin line. The challenge lies in the fact that each post is centered and has a width of 800 pixels. As a result, .post { background: ...

htmlcss

Setting the minimum and maximum width of a div using Bootstrap, not based on the number of columns

I want to adjust the number of columns based on the width of the screen rather than choosing a specific value like 3, 4, 5, or 6. ...

htmlcss

Challenges with loading content and async JavaScript within websites

I decided to replace the content on index.htm with the content from project.htm. By clicking on a#front, it redirects to project.htm and dynamically updates the content. However, I am facing an issue regarding how to run the javascript that accompanies thi ...

javascriptjqueryhtmlajax

The magic of coding is in the combination of Javascript

My goal is to create a CSS animation using jQuery where I add a class with a transition of 0s to change the color, and then promptly remove that class so it gradually returns to its original color (with the original transition of 2s). The code below illus ...

javascriptjqueryhtmlcss

"Error message stating 'Unresolved variable' occurs in the code while trying to assign className={styles.nameOfClass

My current task involves adjusting the style of a button in ReactJS using the "className" property. However, I encountered an error message in WebStorm stating "Unresolved variable nameOfClass," and the desired style changes did not reflect when running we ...

cssreactjstypescript

The h3 element is not responding to the adjacent sibling selector

Below is my HTML DOM structure. I am trying to remove the margin and padding for all h3 elements that are immediate siblings of a div with the id "successor". I attempted to achieve this using the adjacent sibling selector "+", but unfortunately, I'm ...

htmlcsscss-selectors

Is it possible for the child of mat-dialog-content to have a height of 100%?

Check out this demo showcasing the issue: https://stackblitz.com/edit/stackblitz-starters-tdxfuc?file=src%2Fapp%2Fapp.component.ts When the content within the mat-dialog-content becomes too tall, I aim to have control over where the scrollbar will be visi ...

csssassmaterial-uiangular-materialscrollbar

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

Error arising from CSS positioning with dynamically generated images

My challenge is displaying dynamic images from a database alongside details like color, name, and size, with a hover effect that shows a border. Whenever I hover over one image, the other images shift to the right or left. I want them to stay in place. T ...

cssposition

AngularJS Filter: Retrieve objects with distinct IDs and store them in individual objects

Currently, I am working on an angular application which involves handling data objects with key and value pairs as shown below: var data=[{key:"home",value:"hk1"},{key:"home",value:"hk2"},{key:"home",value:"hk3"},{key:"home",value:"hk4"}, ...

javascripthtmlangularjs