Tips for reordering the Bootstrap 4 navbar items

I'm in need of assistance on how to reposition the Bootstrap 4 Navbar. Currently, the logo is on the left side, but I would like it to be centered with menus on both sides.

Can someone guide me through this process? 

<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>
    <!-- links toggle -->
    <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>
    <!-- account toggle -->
    <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>
htmlcssbootstrap-4

Answer №1

To effortlessly achieve this, consider incorporating custom CSS rules into your navbar-brand class. First, add a navbar-brand-centered class to enable the crafting of CSS rules for it.

Your CSS code may resemble something like:

@media screen and (min-width:768px){
  .navbar-brand-centered {
    position: absolute;
    left: 50%;
    display: block;
    width: 160px;
    text-align: center;
    background-color: #eee;
  }   
  .navbar>.container .navbar-brand-centered, 
  .navbar>.container-fluid .navbar-brand-centered {
    margin-left: -80px;
  }
}

This adjustment will centrally align your brand logo. For shifting other content such as social media and links to their specific sides, assign a .navbar-left class to your links and .navbar-right class to your Register and Log in links.

Here's an HTML example:

<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 navbar-brand-centered" href="#"> <img src="assets/img/logo.svg" class="largeLogo" id="Logo"></a>
    <!-- links toggle -->
    <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>
    <!-- account toggle -->
    <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 mr-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 navbar-right">
        <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>

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

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

javascripthtmlevernote

Fonts appear altered on a Windows computer

Working on my new website watr.io, I've noticed that the font appears differently on Windows versus Mac. The one displayed on Mac is the desired outcome, but I can't seem to figure out what's causing the discrepancy. I've been troublesh ...

htmlcssmacostwitter-bootstrap

Combining jquery and Bootstrap through Gulp

I have configured the gulp file below var gulp = require("gulp"); var del = require("del"); var concat = require("gulp-concat"); var uglify = require("gulp-uglify"); var sourcemaps = require("gulp-sourcemaps"); var rename = require("gulp-rename"); var pa ...

jquerygulpbundlebootstrap-4

Troubleshooting problem with CSS aligning <dl> and <dd> tags

Utilizing <dt> and <dd> typically assumes a single line definition for dd. However, in my scenario, I have multiple entries for the definition that I need to correctly display (the exact method will be clarified after reviewing the attached ima ...

htmlcss

tips for understanding the contents of the upcoming css class

I am working with a CSS class that looks like this: #menuAccordion h2 a,.dir-rtl #menuAccordion .viewList{ padding-right:2.5%; padding-left:0 } Is it correct to assume that for any HTML elements using the menuAccordion class, if there is an & ...

css

Tips for aligning a dropdown within a Bootstrap 4 div

I am still getting the hang of using Bootstrap 4 and I'm trying to make sure the dropdown fits inside a div. I've come up with the following code using Bootstrap 4 to try and achieve this, but it's not working as expected: <div class="p- ...

bootstrap-4

Having trouble receiving a complete response when making an ajax request to fetch an entire webpage

Currently, I am experimenting with J-Query Ajax functionality. My goal is to send a request in order to retrieve the entire HTML data of a page that I have hosted on bitbaysolutions.com. The issue arises when I load this URL and execute document.getElement ...

javascriptjqueryhtmlajaxgoogle-chrome-extension

Choose all the checkboxes and set the value of the selected checkbox to 'on' using jQuery

Here is my JSFiddle demonstration featuring a scenario where there are 3 checkboxes. My goal is to assign the value "on" to the selected checkbox, while the unchecked ones should have a value of "off". Initially, I set all checkboxes to have a default va ...

javascriptjqueryhtmlcheckbox

css: Aligning fonts horizontally when they have varying sizes

First time asking a question on this platform! I'm attempting to achieve a "pixel perfect" horizontal alignment of two lines of text, with each line having a different font size. <style type="text/css"> * { font-family: sans-serif;} ...

htmlcssfont-sizealignment

What is the best way to align the navbar-brand link in the middle of a Bootstrap 4 navigation bar?

This question may seem like a duplicate, but it is not. I am specifically asking about Bootstrap version 4.3 and not any earlier versions. The answers I have found so far are either not applicable to the current version (useless for updated projects), or ...

htmlcsstwitter-bootstrapbootstrap-4

Tips on altering hover effects?

I am having trouble changing the font size and color of the a when hovering over p. I have been trying to figure this out for a while now, but I can't seem to get it to work. If anyone has any simple links related to this topic, I would greatly appre ...

htmlcsshover

Using the useState hook in a Node.js backend and React frontend: a comprehensive guide

How can I use useState in my HTML file that already uses node.js? const {useState} = React Below is the code snippet: const {useState} = React; function App(){ const {text, setText} = useState("Hello world") console.log(text); function handleClick(){ se ...

javascripthtmlnode.jsreactjsexpress

Manipulate the value of an HTML element's style parameter with jQuery

How do I change an element's style property using jQuery? This is the HTML code I am working with: <div id="template" style="width:200px; height:200px; border:none;">blabla...</div> I attempted to do this: $('#template').attr ...

javascriptjqueryhtmlcss

How to interact with a button inside a span element without an ID using Selenium

Can anyone help me figure out how to click a button in the browser using Selenium and Python? The button I am trying to click is located within this HTML code: <div id="generate"> <i class="fa fa-bolt"></i> <span>D ...

pythonhtmlselenium

The color of the button in HTML5 will remain constant and not shift

I have several buttons that function like radio buttons - only one can be selected at a time: <button id="btn-bronze" name="btn-bronze" type="button" class="blue-selected">Bronze</button> <button id="btn-silver" name="btn-silver" type="butt ...

javascriptjqueryhtmlcss

Close the fullscreen modal automatically when clicking anywhere inside

Hey there, I'm facing an issue with a button that I want to trigger a full-screen section containing some inputs. I attempted to use Bootstrap's full-screen modal for this purpose, but encountered some challenges. When I clicked anywhere on the ...

javascripthtmlcssbootstrap-4bootstrap-modal

Unable to locate the button using Selenium WebDriver

We're currently grappling with a challenge. I'm developing a bot for an indeed application, and we're having trouble locating the apply now button in the HTML code. The bot currently clicks on a job post in one pane, which opens up the post ...

pythonhtmlselenium-webdriverautomationbots

What is the best way to align a div with a fixed width in the center, when it is positioned between two other divs within a parent

I have this HTML (technically JSX) code snippet here: https://i.sstatic.net/jXYz0.png The center div with the class domain-input-parent is supposed to have a fixed width of 400px and stay centered horizontally on the screen. This arrangement ensures that ...

htmlcssreactjsresponsive-design

Issues with fundamental JavaScript client-side code

As a newcomer to the world of javascript and jQuery, I am diving into my first experiment with javascript. My initial focus has been on changing questions by clicking next or previous buttons. The goal is to create a dynamic quiz webpage that updates quest ...

javascriptjqueryhtml

Adaptive Layout - side menu is shifted to the side by the height of the image

I am currently facing an issue with my code involving a side menu and main content. In Desktop view, the side menu should be on the left and the company content on the right. However, when I added pictures to the content (which I have commented out for no ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-5