Align Bootstrap navigation bar items at the center horizontally

I am currently working on a navigation bar that features two icons, evenly distributed. To achieve this look, I have been experimenting with scaling the icons horizontally in order to make them center-aligned within the navigation bar.

However, I have noticed that the viewbox of the SVG images seems to be causing them not to appear visually centered despite my efforts to adjust their size. I initially attempted to use 'justify-content' without success. Following that, I tried adding padding to the icons to allow for better positioning but encountered some challenges along the way.

Here's the relevant code snippet:

.bar {
                    display: flex;
                    justify-content: center;
                }
                
                /* Style the navigation menu */
                .navbar {
                  width: 90%;
                  background: #3CE18F;
                  overflow: auto;
                  border-radius: 10px 10px 30px 30px;
                  position: fixed;
                  bottom: 3%;
                  display: block;
                  margin:auto;
                }

                .navbar a {
                  float: left;
                  padding: 12px;
                  color: white;
                  text-decoration: none;
                  font-size: 17px;
                  width: 48.6%;
                  text-align: center;
                }

                .navbar a:hover {
                  background-color: #000;
                }

                .navbar a.active {
                  background-color: #4CAF50;
                }

                .microphoneIcon {
                    fill: #FFFFFF;
                    stroke: #FFFFFF;
                    -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
                    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
                }

                .cameraIcon {
                    fill: #FFFFFF;
                    stroke: #FFFFFF;
                    -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
                    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, .7));
                }
<html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
                    <meta name="theme-color" content="#009578">
                    <title>PWA</title>
                    <link rel="stylesheet" href="src/navigationBar.css">
                    <script type="text/javascript" src="src/index.js"></script>
                    <link rel="manifest" href="/manifest.json">
                    <link rel="apple-touch-icon" href="images/logo192.png">
                    
                </head>
                
                <body>
                    <div class="bar">
                        <nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
                            <a href="#">
                                <svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
                                    <path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
                                </svg>
                            </a>
                            
                            <a href="#">
                                <svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
                                    <path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484...
javascripthtmlcssbootstrap-4uinavigationbar

Answer №1

Here's a quick method to expand them horizontally. The navbar should have an inline-flex display, which I've included.

In response to your request to stretch them vertically, I've adjusted the CSS for the tag width.

Please review the CSS code. @Nitrogen

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

/* Style the navigation menu */
.navbar {
  width: 90%;
  background: #3CE18F;
  /* Ensures icons stay within scrollbar area, preventing overflow */
  overflow: auto;
  /* Rounds corners of Nav Bar */
  border-radius: 10px 10px 30px 30px;
  position: fixed;
  bottom: 3%;
  display: block;
  margin:auto;
}

/* Navigation links */
.navbar a {
  width: 100% !important;
  float: left;
  padding: 12px;
  color: white;
  text-decoration: none;
  font-size: 17px;
  width: 48.6%; /* Four equal-width links. Use 50% for two links, and 33.33% for three links, etc.. */
  text-align: center; /* Center alignment of text */
}

/* Background color on hover */
.navbar a:hover {
  background-color: #000;
}

/* Styling for active link */
.navbar a.active {
  background-color: #4CAF50;
}

.microphoneIcon {
/*  position: absolute;
    left: 65.36%;
    right: 26.29%;
    top: 54.22%;
    bottom: 0.46%;*/
    fill: #FFFFFF;
    stroke: #FFFFFF;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
  /* Similar syntax to box-shadow */
    /*background: #FFFFFF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);*/
}

.cameraIcon {
    fill: #FFFFFF;
    stroke: #FFFFFF;
    -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
    filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7));
}
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <meta name="theme-color" content="#009578">
        <title>PWA</title>
        <link rel="stylesheet" href="src/navigationBar.css">
        <!-- Javascript Docs -->
        <script type="text/javascript" src="src/index.js"></script>
        <link rel="manifest" href="/manifest.json">
        <link rel="apple-touch-icon" href="images/logo192.png">
        
    </head>
    
    <body>
        <!-- Class for the Bottom Navigation Bar -->
        <div class="bar">
            <nav class="navbar fixed-bottom navbar-light bg-light nav-fill">
                <a href="#">
                    <svg class='microphoneIcon' id='microphoneIcon' width="42" height="46" viewBox="0 0 42 46" stroke="grey">
                        <path d='M21 23.7571C25.0314 23.7571 28.2857 21.1043 28.2857 17.8179V5.93928C28.2857 2.65288 25.0314 0 21 0C16.9686 0 13.7143 2.65288 13.7143 5.93928V17.8179C13.7143 21.1043 16.9686 23.7571 21 23.7571ZM18.5714 5.93929C18.5714 4.85043 19.6643 3.95953 21 3.95953C22.3357 3.95953 23.4286 4.85043 23.4286 5.93929V17.8179C23.4286 18.9067 22.3357 19.7976 21 19.7976C19.6643 19.7976 18.5714 18.9067 18.5714 17.8179V5.93929ZM21 27.7167C27.7029 27.7167 33.1429 23.282 33.1429 17.8179H38C38 24.8064 31.6614 30.5477 23.4286 31.5178V37.6155H18.5714V31.5178C10.3386 30.5477 4 24.8064 4 17.8179H8.85714C8.85714 23.282 14.2971 27.7167 21 27.7167Z'/>
                    </svg>
                </a>
                
                <a href="#">
                    <svg class ='cameraIcon' id='cameraIcon' xmlns="http://www.w3.org/2000/svg" width="50" height="46" viewBox="0 0 50 46">
                      <path d="M 45 36 a 3 3 90 0 1 -3 3 H 6 a 3 3 90 0 1 -3 -3 V 18 a 3 3 90 0 1 3 -3 h 3.516 a 9 9 90 0 0 6.36 -2.637 l 2.49 -2.484 A 3 3 90 0 1 20.481 9 h 7.032 a 3 3 90 0 1 2.121 0.879 l 2.484 2.484 A 9 9 90 0 0 38.484 15 H 42 a 3 3 90 0 1 3 3 v 18 z M 6 12 a 6 6 90 0 0 -6 6 v 18 a 6 6 90 0 0 6 6 h 36 a 6 6 90 0 0 6 -6 V 18 a 6 6 90 0 0 -6 -6 h -3.516 a 6 6 90 0 1 -4.242 -1.758 l -2.484 -2.484 A 6 6 90 0 0 27.516 6 H 20.484 a 6 6 90 0 0 -4.242 1.758 l -2.484 2.484 A 6 6 90 0 1 9.516 12 H 6 z M 24 33 a 7.5 7.5 90 1 1 0 -15 a 7.5 7.5 90 0 1 0 15 z m 0 3 a 10.5 10.5 90 1 0 0 -21 a 10.5 10.5 90 0 0 0 21 z M 9 19.5 a 1.5 1.5 90 1 1 -3 0 a 1.5 1.5 90 0 1 3 0 z"/>
                    </svg>
                </a>
            </nav>
        </div>
    </body>
</html>

Answer №2

Update the navbar div with display:flex property

.navbar {
  display:flex;
}

Ensure buttons are on separate lines within the navbar

.navbar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: 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

What is the best way to create a slideshow using an IFrame?

Currently seeking a solution for an iframe slideshow that can smoothly transition between multiple HTML iframes. I have a total of 5 iframes that need to rotate automatically and continuously. Any suggestions on how to build a lively and dynamic iframe sl ...

javascriptjqueryhtmliframe

Is there a method, like using jQuery, to insert `<br>` tags into each line of a dropdown select list?

I need help with implementing a select tool in a limited horizontal space with each line containing a lot of information. I attempted to embed a tag into the line but it didn't work. Are there any solutions available that could provide a simple fix ...

jqueryhtmlcssajax

Random variable without repetition in SASS

I have a unique project where I am tasked with incorporating a list of 5 specific colors into 10 different div elements. The challenge is that each color must be used twice and in a completely random order without any repetition of colors. Although utilizi ...

cssrandomsassrepeat

Troubleshooting: Android compatibility issues with dynamic source for HTML 5 video

My HTML5 video with dynamic source loaded using JavaScript is functioning properly in a web browser but encountering issues within an Android PhoneGap build application. Take a look at the code snippet below: JavaScript code: $('#video_player' ...

javascriptandroidhtmlphonegap-build

The successful loading of tab favicons in the DOM of an angular chrome extension is a triumph, however, explicit XHR requests are unfortunately

I've been immersed in developing a Chrome extension with Angular 5. Successfully, I managed to extract favIconUrls from the tabs API and link them to my popup.html's DOM. The icons are retrieved and displayed without any hiccups. See an example ...

javascriptangulargoogle-chrome-extensioncors

Occupying both horizontal and vertical space in a Bootstrap column

I have set up my buttons like this: https://i.stack.imgur.com/OMfhp.png In the image, you can see that the Left Option Button is larger, and I want all buttons to be like that. They are supposed to be aligned next to each other as I am using the Bootstra ...

htmlcsstwitter-bootstrap

Preventing Jquery Append from Adding Previous Elements

I am struggling to figure out how to display the star rating for each hotel individually. I have 5 hotels, each with a different star rating. Here is my Javascript code: function GetStarHotel() { var parent = $(' p.star '), imagePat ...

javascriptjqueryhtml

I will not be accessing the function inside the .on("click") event handler

Can someone help me troubleshoot why my code is not entering the on click function as expected? What am I missing here? let allDivsOnTheRightPane = rightPane.contents().find(".x-panel-body-noheader > div"); //adjust height of expanded divs after addi ...

javascriptjquerytypescriptonclick

Queueing up file downloads through a web browser

When trying to download multiple files from a server, I am required to queue them up instead of downloading in parallel. Unfortunately, I do not have access to the download server, so my only option is to work with the browser. Is there an API available t ...

javascripthtmlgoogle-chromebrowserdom-events

Issues encountered with invoking function in CodeIgniter controller through Ajax

Running a codeigniter website with an add to cart functionality. When the user clicks the add to cart button, the product is successfully added to the cart after the page reloads. The controller code for this feature is as follows: public function buy($ ...

javascriptphpjqueryajaxcodeigniter

jQuery: Issue Encountered with POST Request when Offline (iOS & Chrome)

After developing an HTML5 web application with offline capabilities using AppCache, the process flow is as follows: Online: While connected to the network, the app loads base information in advance. Offline: Users can take the app offline on their tablet ...

jqueryiosajaxhtmlgoogle-chrome

Nesting objects within arrays using Typescript Generics

Hello, I am currently attempting to assign the correct type to an object with nested values. Here is a link to the code in the sandbox: https://codesandbox.io/s/0tftsf interface Product { name: string, id: number productList?:ProductItem[] } interf ...

javascripttypescriptgenerics

Unable to convert JavaScript object to C# through deserialization

In order to pass a model from the controller action to the view, I included a list of objects and converted it into a JavaScript object to facilitate displaying markers on Google Maps. My goal is to send the selected object (selected marker) back to the co ...

javascriptajaxasp.net-mvc

Display two examples from the material-ui documentation

My goal is to merge two demos found in the material-ui documentation. Clipped under the app bar - Describes a page layout Fixed header - Illustrates a table with a fixed header. I am looking for a solution where the table occupies the entire available p ...

cssreactjsmaterial-ui

What could be causing my router UI in angular.js to malfunction?

Having an issue with routing not functioning as intended, here is the relevant code: $urlRouterProvider. otherwise('/list'); $stateProvider. state('home', { abstract: true, views: { 'header': { templateUrl: &apos ...

javascriptangularjs

Developing a PHP foreach loop that integrates seamlessly with a W3 responsive grid

Is there a way to generate multiple sets of three columns using w3.css and a foreach loop to fill each set with data from a sample database? Attempted code resulted in all the columns being in a single row: <?php foreach ($products as $index => $pro ...

phpcssloopsforeachw3.css

How to pass arguments to a function within a preg_replace in PHP

Greetings! I currently have a situation similar to this: $content = preg_replace('#(\s*)\<pre(.*?)\>(.*?)\</pre\>(\s*)#sie', 'dostuff(\'\\3\', \'\\2 ...

phphtmlregexstring

Jquery-ajax fails to accomplish its task

I am just starting to learn about ajax and recently created a simple page on my local server to practice sending and receiving data from/to a JSON file in the same directory. Although the GET method is working perfectly fine, I am having trouble understan ...

javascriptjqueryajax

vuejs mounted: Unable to assign a value to an undefined variable

When I try to run the function below upon mounted, I encounter an error: "Cannot set the property 'days' of undefined" Here is my code snippet: function getDays(date) { this.days = (new Date()).getTime() / ...

javascriptvue.js

Navigate to a different page in NextJs without causing a page refresh or altering the current state of the application

Recently, I encountered a challenge in my NextJS application while attempting to incorporate dynamic routes as endpoints on my server. Specifically, when accessing localhost:3000/register, the register.tsx file is loaded successfully. However, within one ...

javascriptreactjsnext.js