Unable to vertically align an image within a navigation bar item that is not the brand

Having a unique issue for which I cannot find a solution. In the navbar of Bootstrap 4, I am attempting to include an image next to one of the items, not the navbar-brand as commonly asked about.

When Bootstrap 4 is loaded with a custom alpha dark theme, the right-aligned dropdown looks like this:

    <ul class="navbar-nav">

        <li class="dropdown">
          <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img src="https://cdn.discordapp.com/avatars/139412744439988224/a_30a390baf654dfe7f1c336037ea481d4.png?size=32" width="28" height="28" class="d-inline-block align-middle rounded-circle" alt=""> 
            Evie.Codes#4611
          </a>
          <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
            <h6 class="dropdown-header"><i class="fa fa-user" aria-hidden="true"></i> Evie.Codes</h6>
            <a class="dropdown-item" href="/dashboard"><i class="fa fa-cogs" aria-hidden="true"></i> Dashboard</a>

              <a class="dropdown-item" href="/admin"><i class="fa fa-key"></i> Admin</a>

            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="/logout"><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
          </div>
        </li>

    </ul>

When the image is added, all menu items move slightly upwards except the "brand" part. If the image is removed, everything centers perfectly.

Created a fiddle that demonstrates a similar behavior, although most menu items are centered in the fiddle but not in my environment. https://jsfiddle.net/ffksbv1v/

Current Behavior (red lines for emphasis): https://i.sstatic.net/6LMVl.png

htmlcssbootstrap-4

Answer №1

It's hard to pinpoint the exact cause, but it could be due to the image being larger than the text.

Another possibility is that the menu isn't being moved, but rather the navigation bar is expanding because the padding remains the same while introducing a larger image, causing the elements to recenter. Without the image, the brand's height with padding matches the container div's height perfectly. However, with the image added, the brand's height plus padding is slightly lower than both the container div and the parent div of the other elements.

One explanation could be that the brand's a tag isn't perfectly centered, as there seems to be a slight misalignment in the fiddle. To address this, try removing the padding from the last a element (the one with nav-link dropdown-toggle classes), adding 

margin-top: auto; margin-bottom:auto;
to the brand element, or exploring other methods to center the brand.

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

Inspired by the organization and depth provided by nested lists

I am facing an issue with my ul list where adding a nested ul causes the li items above to move. Can anyone explain why this is happening and suggest a solution? Here is an example: http://jsfiddle.net/y5DtE/ HTML: <ul> <li> first ...

htmlcsshtml-lists

Exploring CSS3 Border-Radius Compatibility with Internet Explorer 9

After creating a CSS3 gradient using ColorZilla, I noticed an issue with the DATA URI that seems to be causing problems. Check out my fiddle link here: http://jsfiddle.net/cY7Lp/. In WebKit & Firefox browsers, the rounded corners display correctly. Ho ...

internet-explorer-9gradientcss

Creating a CSS layout where a square remains confined within another square even as the screen size changes can be achieved by implementing specific styling techniques and

I have a group of squares that I want to resize proportionally when the screen size changes, but they keep overlapping instead HTML <div id="Container"> <div id="smallSquare1">square 1</div> <div id="smallSqu ...

htmlcss

Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specif ...

cssbootstrap-4

Troubleshooting problems with TranslateZ performance on mobile devices

While attempting to incorporate the code found at http://codepen.io/keithclark/pen/JycFw, I encountered significant flickering and delays in Chrome when using mobile devices. #slide1:before { background-image: url("http://lorempixel.com/output/abstract ...

htmlcssmobile

Problem with Scroll Listener on Image in Angular 4: Window Scroll Functioning Properly

Hello, I am a newcomer who is currently working on creating a small application that allows users to zoom in on an image using the mouse scroll. <img (window:scroll)="onScroll($event) .....></img> The code above works well, however, it detec ...

javascripthtmlangularscroll

What is the reason for jQuery displaying undefined when attempting to retrieve a custom data attribute using .prop()?

In my dynamic HTML generated by JavaScript, the following code snippet is included: $(".task-status").live("click", function () { alert("data-id using prop: " + $(this).prop("data-id")) alert("data-id using data: " + $(this).data("id")) ...

javascripthtmljquerycustom-data-attribute

JavaScript and HTML - specify the location in the html document where the JavaScript script will be displayed

I'm a beginner when it comes to JavaScript. I am trying to make sure that my HTML page remains unchanged while JavaScript text is displayed in a specific location without refreshing the entire page. To trigger a JavaScript function via a button on a ...

javascripthtml

Revisiting the display of input placeholders

Enabling the placeholder property on an input field allows the text to disappear when something is written and reappear when everything is deleted. Here's the question: Is it feasible to delay the reappearance of the placeholder text until after the t ...

cssplaceholder

Sending information from a parent component to a nested child component in Vue.js

Currently, I am facing a challenge in passing data from a parent component all the way down to a child of the child component. I have tried using props to achieve this as discussed in this helpful thread Vue JS Pass Data From Parent To Child Of Child Of Ch ...

javascripthtmlvue.jsweb-applications

Show spinner until the web page finishes loading completely

Could anyone guide me on how to display Ring.html for a brief moment until About.html finishes loading completely? I need the Ring.html page to vanish once About.html is fully loaded. As a beginner in web development, I would greatly appreciate your assist ...

javascripthtmlcss

The AJAX success function is operational, yet the file does not execute

As a newcomer to StackOverflow and web development, I am pressed for time with this assignment, so please bear with me if I struggle with understanding web development terminologies. My current challenge involves calling another php file through ajax in my ...

javascriptphpjqueryhtmlajax

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

htmlcssbootstrap-4asp.net-core-2.0

Tips for defining types for specific CSS properties in TypeScript, such as variables

Perhaps there are already solutions out there, and I appreciate it if you can share a link to an existing thread. Nevertheless... In React, when I use the style prop, I receive good autocompletion and validation features like this example: https://i.sstat ...

csstypescript

The HTML link is not directly attached to the text, specifically in Internet Explorer

When viewing my website in Chrome, the menu links in the Header function correctly. However, in Internet Explorer (specifically version 11), hovering over 'HOME,' 'LISTINGS,' or 'AGENTS' reveals that the displayed URL is incor ...

htmlcssinternet-explorer

Incorporate the list seamlessly into the remaining content of the page

https://i.sstatic.net/lIsnd.png https://i.sstatic.net/Nftto.png I am currently developing a Vue component that utilizes an API call to search for a list of cities based on user input. My challenge is ensuring that the displayed list does not overlap with ...

htmlcssvue.js

When there is an absence of data, the jQuery datatable mysteriously van

I have encountered an issue in my Django app where a datatable used in the template disappears if there is missing data in any column or row. The problem occurs when trying to download the data in CSV, Excel, PDF, or copy format. Here is the HTML code snip ...

javascriptjqueryhtmldjango-templates

Comparison of getComputedStyle() and cssText functionality between Internet Explorer and Firefox

Take a look at this example to see the issue in action. I'm attempting to access the cssText property of a <div> using window.getComputedStyle(element) (which provides a CSSStyleDeclaration object). While this works smoothly in Chrome, it' ...

javascriptcssinternet-explorer

Removing an active image from a bootstrap carousel: A step-by-step guide

Within my bootstrap carousel, I have added two buttons - one for uploading an image and the other for deleting the currently displayed image. However, I am unsure how to delete the active element. Can someone provide assistance with the code for this but ...

javascripthtmltwitter-bootstrapcarousel

Mismatched Container Alignment in HTML and CSS

I am struggling to position the timeline next to the paragraph in the resume section, but it keeps appearing in the next section or below where it's supposed to be. I want the timeline to be on the right side and the heading/paragraph to be on the lef ...

htmlcsstwitter-bootstrapbootstrap-4