Navbar not aligning properly with Bootstrap justify-content option

<nav class="navbar navbar-expand-lg navbar-light bg-light justify-content-start">
    <a class="navbar-brand" href="#"><img src="images/logo.png"></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 justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Servicios</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Soporte</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
      </ul>
    </div>
  </nav

I'm attempting to align only the links bar to the right side (excluding the navbar-brand). I have attempted to include the "justify-content-..." property in various places without success.

htmlcssbootstrap-4navbarjustify

Answer №1

The previous code had a justify-content-start class that I removed and replaced with a new class to float the items to the right on mobile view.

Please confirm if this is the desired outcome...

Updated snippet:

.navbar-collapse .navbar-nav .nav-item .nav-link {
  float: right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light ">
  <a class="navbar-brand" href="#"><img src="https://www.akberiqbal.com/favicon.ico"></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 justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Inicio<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Servicios</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Soporte</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contacto</a>
      </li>
    </ul>
  </div>
</nav>

Answer №2

Take out the align-items-start from the header element and leave the align-items-end in place. This adjustment should be sufficient.

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

When elements are arranged side by side without using floats, the alignment at the top is not correct

I am having trouble aligning multiple divs next to each other using inline-flex. They are not lining up properly on top (refer to the screenshot). Interestingly, if I remove the svg, the divs align correctly. ...

htmlcsscss-position

Guide to implementing onhashchange with dynamic elements

Hey there! I've encountered a problem with two select boxes on my webpage, each in different anchors (one on the page, the other in an iframe). What I'm trying to achieve is for the code to recognize which anchor it's in and then pass the se ...

javascriptjqueryhtmlurlhashchange

Tips for eliminating repetitiveness in situations such as BEM modifiers

As I delved into using my own adaptation of the BEM methodology, I encountered a roadblock with modifiers for nested elements. The challenge at hand is changing the link color to red when product-desc-name has the mark class. The snippet below illustrat ...

cssbem

"Troubleshooting the Touch Functionality on Bootstrap Carousel for Mobile

Sections of my responsive website utilize a bootstrap carousel to cycle through text and images. However, during testing, it was discovered that users on iPads were unable to swipe up and down to view more content on the site. It seems that swipe compatibi ...

jqueryhtmlcsstwitter-bootstrapcarousel

Utilizing Bootstrap to emphasize the selected navbar item by adding the active class upon

I was attempting to emphasize the clicked navbar by adding an active class. This is the code I tested: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> < ...

htmlcssbootstrap-4

Safari iOS does not properly support responsive images when using srcset and sizes

I am facing an issue with the following code snippet: <img src="/img/footer/logo_white.png?v=2.0" srcset="/img/footer/logo_white.png?v=2.0 1x, /img/footer/logo_white2x.png?v=2.0 2x" > This ...

htmlcssresponsive-imagessrcset

Choosing collections of information and establishing their positions

Trying to determine whether a team is home or away based on a coding logic where 'home' = 1 and 'away' = 0. The code successfully selects two teams from each game, but encounters confusion in identifying the home and away teams after th ...

phphtmlmysqlpdo

Highlight the text element that has been clicked

I'm looking to create a list of text elements that can be underlined when clicked individually. Adding the text decoration to the tabText applies it to all items, but I need a way to remove the underline from the previously clicked tab when clicking o ...

javascriptcssreactjstypescriptreact-native

Enhance Your Images with Hovering Icons

Is there a way to display an icon checkmark over the main image when a user hovers over it? The icon should appear in the top right corner of the image. <div> <img class="result-image" src="{{$property->photo}}"> <! ...

htmlcss

Update the background color when a selectable option is chosen and not disabled

I am searching for a solution to modify the color of a select box if one of the disabled options is not chosen. Here is an example of the dropdown: <select class="selectoption" name="desc[]"> <option disabled="disabled" selected="sel ...

javascriptjquerycssforms

``When clicked, the button vanishes into thin air

I have a basic HTML file (it's part of an MVC 4 project, but I also tested it on a simple HTML file) with two buttons and some jquery script: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"& ...

jqueryhtml

Images inside columns are not being properly displayed in a PHP for loop when using Bootstrap

I have created a bootstrap page in which I am attempting to showcase images inside bootstrap columns. Below is the code snippet that I have used: <!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset ...

htmlcssimagebootstrap-4width

Change the color when hovering over the select box

Using jQuery, my goal is to change the hover color in a select box from its default blue to red. I understand that the hover color of the select input may vary based on the operating system rather than the browser, but I am making progress towards achievin ...

javascriptjqueryhtml

Unusual performance issues observed in a flexbox when adjusting window size in mobile Chrome

Encountering an unusual issue with flexbox on a mobile browser. For a visual demonstration, view this gif Specifically happening on Chrome mobile on a Google Pixel phone. Using a resize script to adjust element sizes due to limitations with 100vh: windo ...

javascriptcssmobileflexboxvue.js

The matter at hand pertains to the aesthetics of formatting HTML components

Below is my attempt at creating a search box and styling it. However, I am encountering an issue where the CSS properties applied to the box are not being rendered. I have tried including the CSS in a separate file as well as within the script itself, but ...

phphtmlcss

Can we set $_SESSION equal to $_POST data?

I'm not sure if I'm on the right track, but let's consider this scenario. form.php <?php session_start(); $_SESSION['average'] = $num; echo ' <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <h ...

phphtmlformssessionpost

Scrollable divs in a Bootstrap layout

If you take a look at this fiddle I created, you can see what I've attempted. My goal is to have a webpage without scroll bars but with the col-left and col-right divs getting a scrollbar when they overflow. Could someone provide some insight on what ...

htmlcssbootstrap-4

Unusual occurrence: unexpected positioning issue with iOS and Chrome (Windows)

My website looks perfect on Firefox, but unfortunately, it's not displaying correctly on Safari (iOS) and some Chrome devices. The Menu-Bar, which should be position fixed, is not showing properly. I'm not sure what the issue is. Screenshots: ...

ioscssgoogle-chromecss-position

CSS is broken when transitioning from the development to the live site

After configuring the CSS for this site using CodeIgnitor, I placed it in the specified location: {link rel="stylesheet" type="text/css" href="<? echo base_url();?>application/assets/css/public.css" /> Although Firebug confirms that the link is ...

htmlcss.htaccesscodeigniter

Steps to reverting CSS attributes back to their default values for a specified element (or blocking inheritance)

How can you reset a specific CSS attribute of an HTML element, which is automatically inheriting styles from its parent, to the default value? For example: CSS: .navigation input { padding: 0; margin: 0 30em; } HTML <div class="navigation"& ...

htmlcss