Alignment of Images in a Navbar According to Height

I am in the process of developing a website using Bootstrap 4 and I am trying to create a centered navbar with the navbar-brand. By placing navbar-nav on each side of the navbar-brand, I was able to achieve this layout. However, my issue is that the navbar-brand is currently vertically aligned in the center of the navbar. How can I adjust the alignment so that the navbar-brand sits at the bottom of the navbar with any excess sticking out at the top, all without altering the margins?

#hdrContainer {
  background-color: #0a3782;
}

.container {
  background-color: inherit;
}
/* Additional CSS code omitted for brevity */

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<!-- More HTML code here -->
htmlcssbootstrap-4twitter-bootstrap-4

Answer №1

The solution provided below utilizes the flexbox utility classes found in Bootstrap, which are extensively explained in the documentation.
The .navbar-brand has been enclosed within a <div id="logo"> to allow for its positioning to be set to absolute, with a bottom position of 0. This adjustment shifts the logo container to the bottom of the navbar.
Additionally, the .d-none .d-lg-block classes have been included to hide the logo when the menu is collapsed.

You can also find this solution on CodePen.

    /* Positioning the logo at the bottom */
    #logo {
        position: absolute;
        bottom: 0;
    }

    /* Basic styling for consistency with the source */
    .navbar {
        background-color: gray;
    }

    #header {
        height: 100px;
        color: white;
        background-color: #0a3782;
        
        display: flex;
        justify-content: center;
        align-items: center;
    }
<div id="header">[header placeholder]</div>

<nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
            <div class="navbar-nav">
                <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
                <a class="nav-item nav-link" href="#">Features</a>
                <a class="nav-item nav-link" href="#">Pricing</a>
                <a class="nav-item nav-link disabled" href="#">Disabled</a>
            </div>

            <div id="logo" class="d-none d-lg-block">
                <a class="navbar-brand m-0" href="#">
                    <img src="http://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="75" height="75" alt="">
                </a>
            </div>

            <div class="navbar-nav">
                <a class="nav-item nav-link" href="#">Item 1</a>
                <a class="nav-item nav-link" href="#">Item 2</a>
                <a class="nav-item nav-link" href="#">Item 3</a>
                <a class="nav-item nav-link" href="#">Item 4</a>
            </div>
        </div>
    </div>
</nav>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

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

Conceal any DIVs that do not include every specified class

My webpage consists of numerous DIVs, each representing a specific product with its own set of characteristics. I have assigned these characteristics as classes to each product. Here is an example of how each product DIV is structured: <div class=&apos ...

javascriptjqueryhtml

Loop through the component name and route path in ReactJs to efficiently organize and structure your application

In my route file coding for ASP.NET, I am creating routes by fetching details from the backend. Successfully getting details like [Contacts, Pipelines, Stages]. import * as React from 'react'; import { BrowserRouter, Redirect, Route } from &apos ...

javascripthtmlreactjstypescript

The positioning of the Zorro table column remains flexible despite the presence of nzLeft

I am currently developing a project using Angular. Within one of my components, I have a table that displays some data. This table is generated by the ng-zorro table module. However, I've encountered an issue where setting a table column or header wi ...

htmlcssangularng-zorro-antd

Tracking the progress bar as files are being uploaded via AJAX using HTML5

Currently, I have a progress bar that increments based on the number of files and their sizes. I am looking to implement an overall progress bar to display while uploading files to the server using AJAX and HTML5. Each file is uploaded individually to th ...

javascriptjqueryajaxhtml

Incorporate an additional javascript document into a VueJS component

What is the most efficient method to include Javascript files in Vue.js components? ...

javascripthtmlvue.js

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the Most Effective Method for Implementing a Unique Font-Family without Sacrificing Loading Speed

I have recently incorporated my own unique font to my website and utilized the code below to specify a custom font-family. Unfortunately, I've encountered an issue where the custom font initially displays as a standard web font while the page is loadi ...

cssfont-face

Group a set of x elements together within a div, and then group a distinct number of elements together after every x-grouping

Is there a way to achieve a looping structure like this? For instance: Group every 2 divs into a new div, then (after every 2nd grouping) group every 3 divs together <div id="container"> <div></div> <div></div> ... </div& ...

javascriptjqueryhtmlwrapall

An external iframe will automatically adjust its settings to have an "overflow: hidden" attribute

My app relies on using iframes to interact with third-party websites. Unfortunately, one of these websites has a feature that automatically changes the "overflow" property to "hidden" when it detects that it is being utilized within an iframe. Is there a ...

cssreactjsgoogle-chromeiframe

.htaccess file is causing js and css files to not load

I followed an MVC tutorial by howcode on YouTube, but I encountered an issue where my CSS and JS files were not loading due to the htaccess configuration. .htaccess file: RewriteEngine On RewriteRule ^([^/]+)/? index.php?url=$1 [L,QSA] I attempted vario ...

javascriptphpcssapache.htaccess

Seems like JavaScript's .active functionality is failing to function properly in my case

I'm encountering an issue with my website's homepage. I have a list of services displayed, and the intention is for a description to appear when one of the services is clicked. However, clicking on the buttons does not trigger the expected action ...

javascripthtmlcssfunction

The fixed blocks are covering the Blueimp gallery within the relative container

Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button. <div class="nav">nav</div> <div class="wrapper"> <div id ...

javascripthtmlcssimage-gallery

How to Use Django to Load a Text File into an HTML File with the Help of

I came across an interesting code example on a website called w3schools.com that I would like to incorporate into my Django project. The code utilizes the jquery load() function to load a text file into an HTML file. Here is a snippet of the code: <!DOC ...

javascripthtmljquerydjango

The navbar in mobile view is not affected by the z-index property

Having created a navbar with scroll effect, I am encountering an issue with the mobile responsive view. Can someone please assist me in solving this problem? I would like to position the bottom nav-list below the navbar in the mobile view when clicking on ...

css

Is the image flickering non-stop when the button is pressed?

Every time I push the button, the image on the HTML 5 canvas flickers. After investigating, it seems like the issue might be related to the ctx.clearRect(0,0,100,500) function. Any suggestions on how to fix this problem? I'm currently working on anim ...

javascripthtmlhtml5-canvashtml5-animation

Navbar-toggle divider shade

I am having trouble changing the color of the line break on the Twitter Bootstrap 3 navbar-toggle function. Upon viewing this image, you can see that there is a line break using my background color. https://i.sstatic.net/qgVAm.jpg I have tried several o ...

csstwitter-bootstraptwitter-bootstrap-3

A guide on updating a boolean field in the database using ajax

Here is a piece of my html code: <form action="" method="post"> {% csrf_token %} {% if donate.is_taken == False %} <br> <button type="submit" class="btn" name="taken_or_not" ...

javascripthtmldjangoajax

Tips on handling a JSON string alert

Can someone guide me on how to extract a specific value from a JSON string I received in an alert message? The JSON string looks like this: {"Error":true, "data":["not available","somethinghere"]} The JSON string is obtained from an alert using the follow ...

javascripthtmljson

Bottom-fixed navigation bar with adhesive functionality

I have been attempting to create a navigation bar that starts at the bottom of the page and then sticks to the top as the user scrolls, similar to the functionality on this website (http://grovemade.com). However, I have had little success so far. Could s ...

jqueryhtmlcss

To activate a function, simply click anywhere on the body: instruction

One of my latest projects involved creating a directive that allows users to click on a word and edit it in a text box. Once edited, clicking anywhere on the body should return the word back to its updated form. html <div markdown>bineesh</div& ...

javascripthtmlangularjs