Centered logo in navigation bar

Is there a way to keep the logo in my navbar from pushing down and expanding the background height? I want the logo to sit on top and overlap without affecting the layout. If positioning the logo absolutely could solve the issue, how can I make it happen only within the container itself?

I am currently using a li tag with an img tag inside for the logo in my Bootstrap 4 navbar. I prefer not to use any hacky workarounds. Here is a link to see what I'm referring to: Navbar with logo


    <nav class="navbar fixed-top navbar-expand-md justify-content-between">
        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse justify-content-center" id="collapsingNavbar">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="collapse">Link</a>
                </li>
                <li class="nav-item">
                    <img src="img/logo-placeholder.png" id="logo"></img>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link <span class="sr-only">Home</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#" data-toggle="collapse">Link</a>
                </li>
            </ul>
        </div>
    </nav>
htmlcssbootstrap-4navbar

Answer №1

To center the items in .navbar-nav, simply apply align-items: center;

Additionally, ensure that your image tag does not have a closing tag like this 

<img src="img/logo-placeholder.png" id="logo"></img>

Instead, it should be written like this 

<img src="img/logo-placeholder.png" id="logo">

UPDATE AVAILABLE

Based on the image reference provided

Create two ul elements - one aligned to the left and one to the right, with the image placed in the middle.

Add styling to the .navbar-nav using the following properties:

  width: 100%;
  background-color: #eee;

You can then adjust the position of the ul elements by applying these styles: 

.right {
  justify-content: flex-start;
}

.left {
  justify-content: flex-end;
}

.navbar-nav {
  align-items: center;
  width: 100%;
  background-color: #eee;
}

.right {
  justify-content: flex-start;
}

.left {
  justify-content: flex-end;
}

Feel free to experiment with the solution on JSFiddle

Answer №2

If you want to center your navbar, you can add the following style: .navbar{text-align:center;}. This will ensure that both the text and image are aligned in the center.

Answer №3

include this in your css file

#navbar-primary .navbar-nav { 
//  background: #ededed;
  width: 100%;
  text-align: center;
  > li {
    display: inline-block;
    float: none;
    > a {
      padding-left: 30px;
      padding-right: 30px;
    }
  }
}

HTML file
<header role="banner">
<nav id="navbar-primary" class="navbar" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-primary-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-primary-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
</header><!-- header role="banner" -->

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

What is the reason that padding is excluded from the height calculation of a display flex container?

.wrap { display: flex; flex-flow: column; } .row { display: flex; flex-flow: row wrap; background: yellow; } group label { padding: 1em; background: red; } <div class='wrap'> <h2> Header </h2> <div class=& ...

htmlcss

When I refresh the page, the table expands in both Google Chrome and Opera browsers

After creating an HTML table, I noticed that when I refresh my page, it appears stretched out in Google Chrome and the Opera web browser. However, when tested in Internet Explorer and Firefox, the table displays normally. The oddly sized table after a pa ...

htmlcsshtml-tablestretched

The right margin is left untouched by Bootstrap

I have been working on code using Bootstrap and added the class "m-0", but I am still seeing margin on the right side of the element. Here is the code snippet: <html lang="en"> <head> <meta charset="UTF-8"> &l ...

htmlbootstrap-5

Angular: facing difficulty displaying static html pages on server, although they render correctly when run locally

Within my Angular project, I have stored a few static html files (specifically sampleText.html) in the src/assets/html folder. In one of my components, I am attempting to fetch and display this file. The following code is being used for this purpose. Every ...

javascripthtmlangular

Using checkboxes in HTML tables to display values, names, and IDs in PHP

In my current project, I am dealing with a table of checkboxes that I need to save in a database. Each checkbox needs to be saved separately with its name and value as individual records: <tr><td><input class="perm" name="feature[]" type= ...

phphtmlsql-server

Utilizing the Bootstrap Carousel tied to a specific slide index

Here is a simple HTML page I have created. <html> <head> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css&quo ...

javascriptbootstrap-4carousel

The functionality of Intersection Observer causes text to appear over the header

Hey everyone, I've been working on a scrolling animation to make text appear when it's at least 50% visible. So far, I have an animated header with an Onscroll Event and Intersection Observer for the text. It's all working well, except for ...

javascripthtmlcssoverlappingintersection-observer

JavaScript fails to enforce character limits on form text fields

After multiple attempts to limit the number of characters in an input field using JavaScript, I am still faced with the issue. function yeahbaby() { document.getElementByName("surname").maxLength = "40"; } This function is called upon loading the form as ...

javascripthtml

Slide the navbar and bottom toolbar up or down when scrolling, similar to the Pinterest app's functionality

Similar to the functionality in the Pinterest app, I want my top navigation bar to slide up/down and at the same time have my bottom toolbar slide down/up when scrolling. While I've successfully made my top navigation bar hide/show using the code pro ...

javascriptjqueryhtmlioscss

Unable to properly align divs vertically

Having trouble getting some divs to align properly, whether they are in an accordion or not. The current layout is not what I want: My goal is to have them vertically aligned at the top, despite varying lengths. Any help would be appreciated. I attempted ...

javascriptjqueryhtmlcssvertical-alignment

only a single backdrop filter can be in use at any given moment

Experimenting with backdrop-filter in Chrome 76. I'm working on a menu with 2 divs, each with a backdrop-filter applied. The first div is displaying the filter effect perfectly, but the second one isn't. Interestingly, when I remove the filter fr ...

htmlcss

What is the best method for retaining just a specific portion of HTML code within Webbrowser VB.Net?

As a web developer accustomed to working with websites, I am now faced with the task of creating a Windows-based program using VB.net. In this project, I have two domains - A and B, where B is embedded within A using an iframe element. The code snippet for ...

htmlvb.netiframewebbrowser-control

Get rid of the spaces in web scraping <tr> tags using Node.js

I've encountered a problem that goes beyond my current knowledge. I'm attempting to web-scrape a specific webpage, targeting the <tr> element in nodejs. Although I can successfully retrieve the content, it seems that the format is not as cl ...

javascripthtmlnode.js

What is the most efficient way to group object values with the same property value into the same subarray using Javascript?

I need help with organizing data in an array. I have an array with 190 objects, each containing six keys and values, shown here: https://i.sstatic.net/a1gmh.png My objective is to create a new array that groups the values by year, like this: [ [2000 ...

javascripthtmlarrays

IE11 is unable to display the background image

I am attempting to create a process roadmap by using background images on list items. The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc). CSS CODE body{padding: 50px 0;} .status-line { width: 80%; ...

htmlcssinternet-explorer

Is there a way to customize the title on the Configuration Page within a Joomla Component?

Problem with updating string in Language File: COM_OHANAH_CONFIGURATION="Ohanah Konfiguration" I have tried adding the above string to the Language File, but it doesn't seem to reflect the changes. I have checked other Joomla Components and they all ...

phphtmlxmljoomla

Customize various page designs using a single CSS file to generate loops

I encountered an issue with different background images needed for each page, where the ID is generated from the following for loop statement: `$`function nextButton() { if(curNum<numScreens) { curNum = parseInt(curNum)+1; document.loca ...

jqueryhtmlcss

How to set a canvas as the background of a div element

Check out my code snippet below: <!DOCTYPE html> <html> <body> <div id='rect' style='width:200px;height:200px;border:1px solid red'> </div> <canvas id="myCanvas" style="borde ...

javascripthtmlcsscanvas

The background image is cropped at both the top and bottom edges

Check out this JSFiddle link: http://jsfiddle.net/SoSoDef/uhx3o62f/1/. The code seems to be running fine, but I'm facing an issue where the image is being slightly cut off at the top and bottom for some reason. -webkit-background-size: cover; Can an ...

htmlcssimage

What is the best way to display a web application on IE8 when compatibility mode is enabled, even though the application itself does not support compatibility mode?

Although I've looked for answers on stackoverflow and other sources, none of them seem to work for me. My application doesn't support Internet Explorer compatibility mode, but the client workstations have it enabled by default. I've tried v ...

htmlinternet-explorerinternet-explorer-8