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

Switch image formats to webp using react js

Utilizing the react-dropzone package, I aim to incorporate images into my application. To achieve this, I must send the images to a firebase server after managing image conversions. Whilst browsing through YouTube tutorials, I came across a guide demonstr ...

javascriptreactjsnext.jswebp

Take a snapshot of an element using fixed element positioning

When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...

javajqueryhtmlcssselenium

Angular: Verify that all services are fully executed before proceeding to the next step

We have adopted Angular for our project. Our component receives data from an API, which is then processed by Data Services. These services transform the data by combining first and last names, rounding dollar amounts, performing calculations, etc. The fina ...

javascriptangulartypescriptangular8

Could you explain the distinction between these two arrow functions?

I'm puzzled about why the second arrow function is effective while the first one isn't. //the first one doesn't function properly this.setState = () => { text: e.target.value, }; //in contrast, this one ...

javascriptreactjsjsx

The HTML generated by Angular does not display as anticipated

When converting the angular-generated HTML to a PDF using jspdf, it does not take into consideration angular classes like ng-hide. This means that elements styled with the ng-hide class will still appear in the generated PDF. To see an example, visit the ...

htmlangularjspdfmarkupjspdf

React Native Header Icon Not Showing on the Left Side

I'm brand new to react and currently working on a project where navigation is done through a hamburger menu. I haven't encountered any errors in my code, but for some reason, the hamburger menu icon isn't displaying as expected. Interestingl ...

javascriptreact-nativereact-navigation

I must determine whether the contents of an array exceed zero

THE SUMMARY: I have three value numbers for an array. If the total addition of the array's elements is greater than 0, I need to display "el funcionamiento no es infinito", otherwise "es infinito". It seems that it's not working because I belie ...

javascriptarraysobject

Learn the process of utilizing Javascript to substitute additional texts with (...) in your content

I am facing a challenge with a text field that allows users to input text. I want to use JavaScript to retrieve the text from the textbox and display it in a paragraph. However, my issue is that I have set a character limit of 50. If a user exceeds this li ...

javascriptjqueryhtml

Vue.js - Implementing multiple values (array) for a component through a property

I am currently working with vue.js components that receive their data from external sources. For example: <vue-button icon="fa-arrow-right" text="mytext"></vue-button> Initially, this setup is effective. However, I encountered a challenge wh ...

javascriptvue.jsvuejs2vue-component

How are the script name and script file connected in WordPress enqueuing?

When adding a jQuery script to the function.php file using the enqueue method, how does the script name relate to the actual file that contains the jQuery code? Is the script name arbitrary, or is it derived from either the file name or the actual script w ...

javascriptjquerywordpress

Guide to implementing this specific design using CSS within jQuery Mobile

Want to achieve the red circle effect using CSS. Currently working with jQuery mobile and AngularJS. Below is a snippet of my code: <div data-role="page" id="p2"> <div class="ui-bar ui-bar-d "data-role="header" > <a href="" data-role=" ...

css

Send in 3 sets of HTML forms along with a single JavaScript button to save all data in a single row within

I'm facing an issue with submitting multiple forms on a page without submit buttons. I have a script that submits all three forms at the same time, but it's creating separate rows in the database instead of one combined row. Any suggestions on ho ...

htmlforms

What steps do I need to take to modify the MUI Badge component and insert custom text inside?

Is there a way to replace the number with a label next to a new row added to my table using MUI Badge? For example, instead of displaying a number like 4, I want it to show the word "New" as shown in this image: enter image description here This is the co ...

javascriptreactjsmaterial-ui

Use JavaScript to gather various data forms and convert them into JSON format before transmitting them to PHP through AJAX

My understanding of JSON might be a bit off because I haven't come across many resources that discuss posting form data via JSON/AJAX to PHP. I often see jQuery being used in examples, but I have yet to delve into it as I've been advised to firs ...

phpjavascriptajaxjson

Combining a form and table on a single webpage, I am curious how to utilize the form to update the table effectively using Express and Node.js

Seeking guidance in website development as I face a particular challenge. I aim to create a dynamic search page for a website. The form should allow users to select a location or category, with the same page updating with relevant results. Despite succes ...

javascriptnode.jsexpress

The declaration file for the 'react' module could not be located

I was exploring Microsoft's guide on TypeScript combined with React and Redux. After executing the command: npm install -S redux react-redux @types/react-redux I encountered an error when running npm run start: Type error: Could not find a decla ...

javascriptreactjstypescriptredux

Tips for showing error messages in response to exceptions

My function is supposed to display the response text that comes back from ex.responseText. However, every time I attempt it, it returns as "undefined" even though the text is there. onError: function (ex) { $('<div>' + ex._message + &a ...

javascriptjsonerror-handlingex

Ensure that the <td> element remains within the confines of the window

When creating a table with some content, I encountered an issue where long strings would extend beyond the window. I attempted to set max-width: 80%; to limit the length, and also tried setting td, th = width: 240px;, but the problem persisted. Next, I ex ...

htmlcsstwitter-bootstraphtml-table

The web server is unaware of the CSS and JS references

After loading my ASP.NET MVC project on the web server, I encountered an issue where none of my CSS and JS references were loaded. Some of the references in my default layout are listed below: <head> <link href="/Scripts/css/bootstrap ...

c#htmlcssasp.net-mvc

Creating a platform that allows users to build custom themes on a website using ASP.NET/C# programming language

I'm looking for a sophisticated approach to designing an ASP.NET website where users can easily create personalized themes for their sites using a user-friendly interface. Can ASP.NET themes assist with this? Should the interface enable users to gener ...

asp.netcssthemes