Creating a unique Bootstrap Navbar design with vertically staggered elements

https://codepen.io/bencasalino/pen/NWPLLYQ

<div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logout |
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logged in as: 
          <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0"
            alt="avatar image" height="35">
        </a>
      </li>
    </ul>
  </div>

There seems to be an issue with the vertical alignment of the elements on the right side of the navbar. Both elements have the same classes and tag types, but for some reason, they are not aligning properly. I'm currently trying to figure out why this is happening.

If you'd like to take a look, I've included a link to the relevant code on Codepen for reference.

htmlcssbootstrap-4navbarvertical-alignment

Answer №1

To ensure that the navigation occupies the full height available within the list item and the anchor tag is properly aligned, you can add the following CSS:

.navbar-collapse ul li a{
    display: flex;
    height: 100%;
    align-items: center;
    }

Here is a working code snippet showcasing the above implementation:

/* Default Styles */

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


/* Navbar Styles */

.navbar {
  background: rgb(0, 101, 163);
  background: linear-gradient(180deg, rgba(0, 101, 163, 1) 0%, rgba(9, 167, 229, 1) 100%);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

.cta-logout {
  color: #ffffff;
  border: 1px solid white;
  /* background-color: white; */
}

.cta-logout:hover {
  color: #ffffff;
  border: 1px solid white;
  background-color: white;
}

/* ZAPP Color Style Guide Presets */
/* CSS code continues... */
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/base.css">

<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg">
  <form class="form-inline">
    <img src="/images/zapp-logo-white.png" width="100" height="50" class="d-inline-block " alt="">
    <img src="/images/zapp-onsite-logo.png" width="60" height="50" class="d-inline-block " alt="">
  </form>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto nav-flex-icons">
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logout |
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Test |
          </a>
      </li>
      <li class="nav-item">
        <a class="nav-link p-0 color-white" href="#"> 
          Logged in as: 
          <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-5.jpg" class="rounded-circle z-depth-0"
            alt="avatar image" height="35">
        </a>
      </li>
    </ul>
  </div>
</nav>


<p></p>
<h1>Hello, world!</h1>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

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 pass a background:url using JavaScript to CSS?

I have a CSS code snippet below that I would like to dynamically change the "background:url" part using Javascript. div{ background: url('pinkFlower.jpg') no-repeat fixed; -webkit-background-size: cover; -moz-background-size: cover; ...

javascriptjqueryhtmlcss

the pop-up modal function is malfunctioning

I can't get my pop up to work properly. When I click the button, the screen dims as if a pop up is going to appear, but nothing shows up. Can someone please assist me with this issue? Here is the HTML file: <!DOCTYPE html> <html lang="en"&g ...

javascriptjqueryhtmlcss

Why does the last-of-type selector work, but the first-of-type doesn't seem to?

The SCSS code snippet below is causing me some confusion: li { &.menu-item-type-custom { margin-bottom: 10px; a { // } &:last-of-type { margin-bottom: 40px; } &:first-of-type { margin-top: 40px; ...

csscss-selectors

Screen readers are unable to "read" text that is identified through aria-describedby

When enhancing my web application for accessibility, I encountered a challenge. I have implemented two required fields in a form that should display separate error messages as spans. To accomplish this, I am utilizing aria-invalid to signal when the fields ...

javascripthtmlaccessibility

What is the best way to align this horizontal list in the middle of a fixed div?

I have a UL element that contains 4 icons within a div using absolute positioning to align it to the bottom of the screen. This div is located within a fixed sidebar. To create a horizontal list, I applied display: inline to the list items. You can see t ...

htmlcsstwitter-bootstrap

Are HTML5 Track Element Cue Events Working Properly?

My goal is to dynamically assign functions to HTML5's cue.onenter events. This feature is relatively new and currently only supported in Chrome with specific flags enabled (Refer to the example on HTML5 Rocks here). However, I seem to be facing some ...

javascriptnode.jshtmlhtml5-audio

Easy-to-use form input ensuring a constant total of 100

Looking for a way to collect numerical values from users that total 100% on a dynamically generated form? I'm exploring the idea of using a script or algorithm to adjust text fields as values are changed, ensuring they always add up to 100%. However, ...

htmljquerywidget

Place the cursor at the conclusion of the text box

I am working on creating a user input form for chat messaging and I need some help. Here is the HTML-code snippet that I am currently using: HTML-code Currently, when the user presses ENTER, I retrieve the text from the textbox and save it. If the user ...

angularhtmltypescripttextboxchat

Get the PDF in a mobile app using HTML5 and Javascript

For my HTML5/JavaScript-based mobile application, I am in need of implementing a feature that enables users to download a PDF file. The PDF file will be provided to me as a Base64 encoded byte stream. How can I allow users to initiate the download proces ...

javascripthtmlpdfmobile

Ways to adjust the brightness of any color when hovered over

Is it possible to create a universal effect where an element becomes darker or lighter when hovered over, regardless of the initial color? Here is an example: .change-color{ Background:green; width:100px; height:100px } .change-color:hover{ Background ...

javascriptjqueryhtmlcss

Adjust the content column in the form to be mobile-friendly

Currently, I am coding in PHP and using Bootstrap. In my project, there are two columns - the LEFT column displays text, while the RIGHT column contains a form: Presently, when viewing on desktop, both columns are visible. However, on mobile devices, ...

phpcsstwitter-bootstrapzend-framework

Collapsible Span with Maximum Width in Unique Twitter Bootstrap

UPDATED If I assign a max-width value to the .container element, it disrupts the alignment of my spans. <div class="container" style="max-width:940px"> <div class="row"> <div class="span4" style="background-color:#F00">1</div& ...

htmlcsstwitter-bootstrap

Illuminate the rows in a table generated from a parsed text file using PHP

I am facing an issue with my PHP logic for selecting and highlighting rows in a table based on dropdown selection. I have a group of text files that are parsed into a table, and I need to highlight rows that match selections from 5 dropdowns created from t ...

phphtmlparsingselecttext

Revise the cascading style sheets for HTML content loaded via AJAX

I have a situation where I am dynamically loading HTML content using AJAX with JQuery. After the content is loaded, I am triggering a click event on specific elements within the newly added HTML. However, I am encountering an issue when trying to set the ...

htmlcssajaxdynamic

Jquery functions properly within jsFiddle, however it does not successfully execute within web browsers

Here is the code that seems to only function properly in jsfiddle, but doesn't work when used in browsers: http://jsfiddle.net/5r6mx/18/ Here is the code that I am using in the browser, which can also be found in the jsfiddle link above: // JavaScri ...

jquerycss

"Resolving the issue of overflow in dropdown submenus using Css

Observing my CSS menu in the provided image: https://i.sstatic.net/cJMge.jpg Upon hovering over "Haschildren," I notice: https://i.sstatic.net/gJ5M8.jpg The concern arises regarding the overflow issue (grey area around sub-voices). Despite tweaking the u ...

jqueryhtmlcss

A layout featuring a grid design that includes spacing and gutters between items, however, there is no spacing between the items

I am looking to create a grid layout where each child element represents an individual grid square. However, I am facing an issue with spacing between the children and the parent container, which is not desired. How can I eliminate this unwanted space? U ...

htmlcssgrid-layoutcss-grid

Mastering the Art of Displaying Every Side of a Spinning Cube Using HTML and CSS Animations

As I navigate the online world, my goal is to create a dynamic animation of a rotating cube with an image on each face. Despite my efforts, I am struggling to display all faces simultaneously, especially the front and back faces. I have explored various so ...

htmlcsscss-animations

Display or conceal a div depending on whether the user is on a mobile or desktop browser

In order to optimize the display on different devices, I organized my content into two divisions. The left division contains quantity, price, and item name, while the right division includes product names. For mobile browsers, I would like to hide the pro ...

jqueryhtmlcssmobile

Slide the next section over the current section using full-page JavaScript

I'm currently developing a website utilizing the FullPage.JS script found at this link . My goal is to have the next section slide over the previous one, similar to what is demonstrated in this example. I've attempted setting the position to fix ...

javascriptjqueryhtmlcssfullpage.js