How to reposition the Bootstrap navbar Logo from the left to the center

I am looking to change the ordering of Bootstrap 4 Navbar. Currently, the logo is on the left side, but I want it in the center with menus on both sides. Can someone help me with changing this order?

Check out the current Navbar layout below:

<nav class="navbar navbar-light navbar-expand-lg sticky-top navigation-clean" data-aos="fade-down" data-aos-once="true" style="background-color:rgb(16,34,55);" data-toggle="affix">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"> <img src="assets/img/logo.svg" class="largeLogo" id="Logo"></a>
        <button class="navbar-toggler order-first" type="button" data-toggle="collapse" data-target="#navcol-1" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-bars" style="color: #FFC000"></i>
        </button>
        <button class="navbar-toggler " type="button" data-toggle="collapse" data-target="#account" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
            <i class="fa fa-user" style="color: #FFC000"></i>
        </button>

        <div class="collapse navbar-collapse " id="navcol-1">
            <ul class="nav navbar-nav align-items-center ml-auto">
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-home" style="width:18px;"></i>Home</a></li>
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#cor"><i class="fa fa-book" style="width:18px;"></i>Courses</a></li>
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-user" style="width:18px;"></i>About Us</a></li>
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-star" style="width:18px;"></i>Contact Us</a></li>
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-facebook-square" style="width:18px;"></i></a></li>
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="fa fa-twitter-square" style="width:18px;"></i></a></li>
                <li class="nav-item" role="presentation" data-bs-hover-animate="pulse"><a class="nav-link text-warning hvr-underline-from-center" href="#"><i class="icon ion-social-googleplus" style="width:18px;"></i></a></li>
            </ul>
        </div>
        <div class="collapse navbar-collapse" id="account">
            <ul class="navbar-nav ml-auto align-items-end">
                <li class="nav-item"><a class="nav-link" href="#">Register</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Log in</a></li>
            </ul>
        </div>

    </div>
</nav>
javascripthtmlcss

Answer №1

Do some additional searching as this is a frequently asked question.

 .navbar {
        position: relative;
    }
    .navbar-brand {
        position: absolute;
        left: 50%;
        margin-left: -50px !important;  /* Adjust based on your logo width */
        display: block;
    }

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

Can Big Data flow on Mongo DB be effectively simulated?

My idea involves creating a server with routes and models to be hosted on Heroku for processing requests. I plan to make incremental requests to the server until they qualify as Big Data. I suspect there may be limitations on how many consecutive requests ...

javascriptmongodbexpressheroku

What is the best way to indicate the selected item in the Menu List using Material UI React?

I am attempting to dynamically style the menu list items by toggling the selected prop between true and false. In order to achieve this, I am utilizing the onClick method to capture the event.target.name, update the state of the corresponding value associ ...

javascriptreactjsmaterial-ui

Utilizing Json data with Jquery for dynamically placing markers on Google Maps

Seeking assistance as I am currently facing a problem where I need to loop through JSON data and add it as markers on Google Maps, but unfortunately, it only returns null value. Is there a way to automatically connect this to JSON? My plan is to have a Gr ...

javascriptjqueryjsongoogle-maps-api-3

Phonegap's JavaScript canvas feature is experiencing issues

Recently, I came across a JavaScript bouncing ball animation that works perfectly on the Chrome browser when used on a PC. However, when I tried running it using Phonegap Eclipse Android emulator, I encountered an issue where the canvas appeared blank and ...

javascriptandroidhtmlcordova

Modifying the State array is beyond my control

I'm facing an issue passing the codes correctly here, so I'll explain the problem using images. (REMEMBER: All these are within the same component) Issue: I have a single state value: state = { base: [ {tomato: false}, {egg: true} ], ...

javascriptarraysreactjs

Tips for closing a popup without exiting the entire webpage

I'm facing an issue while trying to create a video playlist using two HTML files (index.html and video.html). In my video.html file, I have set up a popup for playing videos. However, whenever I close the popup or click anywhere on the page, it redire ...

javascripthtmljquery-mobile

Spinning triangle around central point using CSS

I'm working on a project that includes the following code snippet: body { background-color: #312a50; font-family: Helvetica Neue; color: white; } html, body { height: 100%; } .main { height: 100%; width: 100%; display: table; } .wr ...

htmlcss

Eliminating the standard padding on a Vuetify v-app-bar

When using Vuetify's v-app-bar, there are default css classes named v-toolbar__content and v-toolbar__extension that apply padding of 16px on the x-axis and 4px on the y-axis, which I aim to eliminate. I attempted to override these classes in my CSS ...

cssvue.jsvuetify.jsappbar

What is the best way to click on the third div class "link" using Selenium when they all have the same div class?

While working with selenium and python, I encountered a scenario where all the HTML elements have the same class "links". There are seven links on the page, each sharing the same class and similar name. I am seeking guidance on how to interact with these w ...

htmlpython-3.xseleniumclick

Troubleshooting AWS S3 SDK upload error when sending data from Next.js API endpoint hosted on Vercel - ERR_HTTP_HEADERS_SENT

I'm currently working on uploading a file from my Next.js API endpoint running on Vercel using the @aws-sdk/client-s3 package. Here's a snippet of my code: import { PutObjectCommand, S3Client } from "@aws-sdk/client-s3"; import type { N ...

javascriptamazon-s3next.jsaws-sdkvercel

Issue with peculiar circumstances regarding the JSON object and generating a chart, can you pinpoint what's amiss?

When sending data (values and dates) from a hard-coded function, everything works fine - the JSON file is populated and the chart is displayed. However, when I send data from the database, the JSON file is populated but the chart does not appear. Here is ...

javascriptc#asp.netjsonasp.net-mvc-4

What is the best way to update a targeted component in React when triggered by an event handler?

Your goal may seem straightforward, but getting a reference to a specific component using this is proving to be tricky. Here we have our App.js file: import React, { Component } from 'react'; import CoolBox from './coolBox.js'; import ...

javascriptjqueryhtmlcssreactjs

MongoDB not being updated

Currently, I am a student delving into the world of full-stack JavaScript development. One resource that I have found particularly helpful is a LinkedIn course where the project involves creating a blog with an "upvoting" feature. However, I have encounter ...

javascriptnode.jsmongodbexpress

What could be preventing my XPath from selecting a link/button using its label text?

<a href="javascript:void(0)" title="home"> <span class="menu_icon">Possibly more content could go here</span> Home </a> When I use //a as the XPath in the above code, it is highlighted. However, when I try //a[contains(text ...

htmlxmlseleniumxpath

How does the "deliver_order" function retrieve the value of the name parameter?

function take_order(name, callback1) { console.log("order has been taken."); callback1(name); } function prosess_order(name, callback2) { console.log(`prosesing order for ${name}.`); callback2(name); } function deliver_order(name) { console.log ...

javascriptfunctionasynchronouscallback

Eliminating pre-set CSS styles injected in Angular 2/Ionic 2 automatically

I'm encountering an issue where adding the ionic 2 gesture (press) to a button results in inline styles being automatically applied to that button. Is there a way to override the styles it adds? Button <button ion-button (press)="toggleFavourite ...

htmlcssangulartypescriptionic2

Content will be loaded only after the user clicks on the item

On my blog, I have a share button that displays different social media platforms when clicked. However, the page takes longer to load due to fetching data from multiple servers like Facebook and Twitter. Is there a way to use jQuery to make these buttons l ...

javascriptjqueryloading

The incorporation of zoom disrupts the smooth scrolling capability of the menu

My landing page has a menu that scrolls users to the selected section. However, my client prefers the page at a 90% zoom level. To accommodate this request, I added the following line of code: body { zoom:90%; } Unfortunately, when I click on a menu o ...

javascriptjqueryhtmlcss

Setting the select option in AngularJS with predefined options can be easily achieved with

I am encountering an issue with a select element that has predefined options. Even though the select element is using ng-model, when the model is set to one of the option values, it fails to be selected. Below is the snippet of HTML code: <select clas ...

javascriptangularjs

Guide to adding a Scrollable Navbar

Is the term "scroll bar" really accurate? I want to create a scrollable feature where users can easily select a city using their mouse wheel (or swipe on a smartphone) and then choose from possible cities within that country in a second window. Something s ...

javascriptjquerycss