"Struggling to position the bottom navbar at the center in Bootstrap?

Can someone help me center the icons in my second navigation bar? I've tried aligning them left and right, and that works, but when I try to center them, it doesn't work at all. Did I miss something in the code or make a mistake? Any assistance would be greatly appreciated.

Here is the CSS code for my second navbar:

.navbartwo {
    overflow: hidden;
    bottom: 0;
    width: 100%;
}

.navbartwo {
    background-image: url(nav.png)
}

.navbartwo a {
    float: centre;
    display: inline-grid;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 13px;
    text-decoration: none;
    font-size: 15px;
    display: flex;
    align-items: center;
}

/* links on hover */
.navbartwo a:hover {
    background-color: #ddd;
    color: black;
}

/* colour to the active/current link */
.navbartwo a.active {
    color: #ebeef7;
}

.navbartwo.navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbartwo .navbar-collapse {
    text-align: center;
}

This is the HTML:

<div class="navbartwo">
<a href="#Dashboard">
    <svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-house-door" viewBox="0 0 16 16">
        <path d="M8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4.5a.5.5 0 0 0 .5-.5v-4h2v4a.5.5 0 0 0 .5.5H14a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146zM2.5 14V7.707l5.5-5.5 5.5 5.5V14H10v-4a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5v4H2.5z" />
    </svg>

<a href="#Map"><svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-geo-alt" viewBox="0 0 16 16">
            <path d="M12.166 8.94c-.524 1.062-1.234 2.12-1.96 3.07A31.493 31.493 0 0 1 8 14.58a31.481 0 ...
            (more SVG code)
            ...
    </svg></a>

    (repeat for other icons)

<a href="#Community"><svg id="try" xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="white" class="bi bi-people" viewBox="0 0 16 16">
        <path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1 1h8zm-..." />
    </svg></a>
htmlcssbootstrap-4navbar

Answer №1

I have created this code snippet for you to review and implement if it resolves your issue. I recommend consolidating class rules to avoid repetition, such as using the .navbartwo class multiple times. I combined all rules and introduced some new ones to make it function correctly.

NOTE: You can remove the background color rule for the .navbartwo class. I added it to visualize the icons since I don't have the current navbar background image available.

I hope this assists you with your request. Happy coding and keep up the excellent work, you are making great progress!

body {
    padding: 0;
    margin: 0;
}

.navbartwo {
    overflow: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: between;
    background-color: #333;
    background-image: url("nav.png")
}

.navbartwo a {
    color: #f2f2f2;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    font-size: 15px;
    width: 200px;
    height: auto;
}


/* links on hover */

.navbartwo a:hover {
    background-color: #ddd;
    color: black;
}


/*colour to the active/current link */

.navbartwo a.active {
    color: #ebeef7;
}

.navbartwo.navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
}

.navbartwo .navbar-collapse {
    text-align: center;
}
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no>
<meta name="description" content=">
<meta name="author" content=">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js"
integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous></script>
<title>DEMO FILE></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous>

Answer №2

Using float: center is not a valid option, you can only float right or left.

To center the 'a' tags in the middle of the navbar, simply add the following code to your navbartwo class:

.navbartwo {
  display: flex;
  justify-content: center;
}

If you prefer to only center the text within each 'a' tag, you can apply the same CSS to the 'a' tags like this:

.navbartwo a{
  display: flex;
  justify-content: center;
}

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

jQuery UI Datepicker Display Issue

I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code: <tr> <td class="label-td"><label for="dateOpen_add">Date Opened</label></td& ...

jqueryhtmlcssjquery-uiuidatepicker

2-panel accordion interface

Hello there, I've encountered a problem that seems to be related to CSS. Here is the project I'm currently working on: My main focus is on the News accordion menu. The goal is to display a small image (50x50 with padding) next to a large headlin ...

jquerycsshtmlaccordion

The requested resource at http://127.0.0.1:8000/storage/profiles/ could not be located (Error 404: Not

I have successfully implemented a feature on my website that allows users to upload their avatar picture using Vue.js and Laravel as the backend. The image is stored in the storage directory, and I can display it on the user's profile page using Vue.j ...

javascriptphphtmllaravelvue.js

Switch from HTML symbol to Java symbol

Is it possible to change an HTML symbol into a Java symbol? For instance, if I have &#xe000, is there a way to obtain the Java char representation like \ue000? What steps should I take to achieve this conversion? ...

javahtmlunicode

What is the best way to incorporate an icon into my HTML search bar?

I'm having trouble getting the search icon from font awesome to display properly within my search bar. Here is the code I'm using: <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet"/> ...

htmlcssbootstrap-5

ways to undo modifications made to a value within an input field using jquery or javascript

$(document).ready(function () { //Highlight row when selected. $(function () { $('#Cases tr').click(function () { $('#Cases tr').removeClass('selectedRow'); $(this).addClass(&apos ...

javascriptjqueryhtml

Having trouble getting padding to work inside a pre block, even when using a wrapper div?

Snippet of HTML Code: <div class="prewrap"> <pre> stepsize = .01 samplestimes = 30 universex = seq(-1, 1, stepsize) universey = sin(pi * universex) </pre> </div> Sample CSS Styles: #prewrap { background-color: #e3e3e3; pa ...

htmlcssweb

Refreshing the Dropdown Menu with Jquery

Looking for a way to create a reusable dropdown menu using css/jquery? Check out this codepen: https://codepen.io/anon/pen/NxXXPg Is there a method to reset the 'active' status when clicking on a blank space or another html element? Here's ...

javascriptjqueryhtmlcssdropdown

Pictures do not adhere to the maximum width set on their parent elements

When the max-width CSS style is set on the body tag and an image within the body surpasses this maximum width, the image does not adhere to the set limit. Instead of resizing, it simply overflows. Why does this happen? So, what is the solution to this pro ...

htmlcss

Step-by-step guide on redirecting a page from a Django form

I'm in the process of developing a dictionary application that allows users to input a word through a form. The issue I'm facing is that when a user enters a word and hits submit, the form disappears leaving only the submit button and the search ...

pythonhtmldjangoformsview

Maintain the border styling of a radio button when it is in the selected state

Having an issue with the radio type options - when selected, a blue border appears but disappears if clicking elsewhere. Need the blue border effect to stay even when clicked outside, unless switching to the other option. Looking to align the price in th ...

htmlcss

IE and Firefox both render CSS styles in their own unique ways

When viewing my website acro.batcave.net on different browsers like IE (Windows 7, IE 11.x) and FF (Windows 7, FF 37.x), I noticed that it appears differently. Chrome seems to have the same display as FF. The CSS file can be found at acro.batcave.net/css ...

css

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

<img class="cl" src="photo/198.jpg"/></br> <audio class="cs" controls> <source src="audio/198 banu nagamothu.mp3" type="audio/mpeg"> </audio> I prefer not to have audio controls initially, but when the image i ...

javascripthtmlcss

Automatically updating div content using a static HTML page

Is there a way to refresh the content of an HTML div tag every 5 minutes without having to reload the entire page? <div id="pie"> <script src="index.js">// this script should be reloaded every 5 minutes </script& ...

javascripthtmlnode.js

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

Exploring Attachments in ASP.NET Core MVC Views

I have placed attachments in a Shared Folder on a server. I attempted to access them using the <a> tag <a href="file:///C:">Open Attachments</a> Unfortunately, this method did not work in ASP.NET Core MVC for unknown reasons. I ...

javascripthtmlasp.net-core

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

javascriptphphtmlforms

Is there a way to detect when the browser's back button is clicked?

As I work on supporting an e-commerce app that deals with creating and submitting orders, a user recently discovered a loophole wherein they could trigger an error condition by quickly pressing the back button after submitting their order. To address this ...

javascriptjqueryhtmlbrowser-history

Unable to get HTML text input validation with RegEx to function, despite incorporating the required attribute

I am attempting to create dynamically generated text inputs that only allow for digits and an optional decimal point. I have added the required attribute but the inputs are not responding to the RegEx pattern. var howMuch = $("<input>").attr("type", ...

javascriptregexhtml

Pressing the menu button will trigger a function that halts after the third click

As I attempted to implement the functionality of this left menu bar, I encountered a roadblock. The click event on the menu button seems to work fine initially - the left bar appears with the first click and closes as expected with the second click. Howeve ...

javascripthtmlcssloopsaddeventlistener