Tips for positioning a Navbar in the middle of the screen at 90% width

I am struggling to center the navbar as a whole, rather than just the contents within it.

Below is the CSS and HTML for my navbar.

.navbar {
  border-radius: 10px 10px 30px 30px;
  background: #3CE18F;
  overflow: visible;
  position: fixed;
  bottom: 3%;
  width: 90%;
}
<nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

No matter what I try with CSS or using class names to center, the navbar always ends up left-aligned. I'm looking for a solution to perfectly center it.

Please refer to the attached image to see the issue:

https://i.sstatic.net/g275v.png

Currently, the nav bar is consistently aligned to the left. I want to avoid using padding since it may vary on different screen sizes.

Any assistance would be greatly appreciated.

htmlcssbootstrap-4uinavigationbar

Answer №1

To center your navigation menu horizontally, wrap it inside a div and use the justify-content property:

<div class="menu-wrapper"&rt;<nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>
</div>

.menu-wrapper {
    display: flex;
    justify-content: center;
}

Answer №2

To optimize the layout, include the properties display: block and margin: auto in the navbar styling. Additionally, apply display: flex to the parent container of the navbar. This adjustment should yield the desired results.

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 for altering the color of two circles when they overlap:

Hello, I am interested in creating an effect where two circles change color when they overlap. Specifically, I would like the overlapped section to become white to represent sets. var canvas = d3.select("canvas"), context = canvas.node().getContext( ...

javascripthtmlcssd3.jssvg

Issue with top-level navigation menu dropdown functionality

I am experiencing an issue with a dropdown menu that has top level and two sub levels. The problem is that while the sub levels function correctly when clicked, the top level does not navigate to the intended page upon clicking. var menu_Sub = $(".men ...

javascriptjqueryhtmlcssdrop-down-menu

Symfony 2 can be configured to add a "data-*" attribute to each radio input field in a form entity

Within my form, I have a field named "membership" that displays radio buttons. Here is the code snippet: ->add( 'membership', 'entity', array( 'class' => 'Comit ...

htmlformssymfony

Display or conceal numerous WTForm labels

Is there a more efficient way to hide/show multiple wtform labels? Currently, I am achieving this with the following code: HTML: {{ render_field(var_1, class = "class_1") }} {{ render_field(var_2, class = "class_1") }} {{ render_field(var_3, class = " ...

jqueryhtmlclasswtforms

Tips for implementing a dynamic tag using AngularJS

I am attempting to use AngularJS to create an HTML element to facilitate downloading a file from the server to the client. I have found that the most straightforward method is to utilize an HTML element with the href attribute. Here is the code snippet I a ...

androidhtmlangularjsnode.jsapk

Tips for aligning icons and text correctly within a table

I can't seem to align the icon vertically with the text. Currently, the image icon is positioned in the middle of the <td> tag, but I want it at the top, as shown in the jsfiddle: http://jsfiddle.net/TheAmazingKnight/N6fLp/ To help visualize th ...

csshtmlhtml-tabletablelayout

React Component for Toggling a Click Event on a Select Tag

I'm currently developing a react app where clicking on a specific text triggers the display of a select tag with several items. However, I've encountered two issues: Upon clicking the text, the select tag appears on ALL list items instead of ju ...

javascripthtmlreactjsjsx

Is it possible to utilize a tracking pixel (invisible GIF) as a background image within a stylesheet?

I'm curious to know if adding a tracking pixel (a transparent GIF with server logging) as a background-image in a linked stylesheet will have the same impact as if it were a regular <img> on a webpage. After conducting a quick test using Chrome ...

htmlcss

When clicked, check if the CSS value is equal to

I have no idea why it's not working. After toggleClass is executed, if the CSS value equals "-84%" then hide(); $(".rwd-sec").click(function() { $(".rwd-main").toggleClass("is-active"); if ($(".rwd-main").css("right") == "-84%") { ...

jquerycssif-statement

Utilizing jQuery and HTML5 data attributes to dynamically retrieve JSON data

I have successfully converted my channel entries into JSON using ExpressionEngine, which is working smoothly. My current challenge is populating a Sweet Alert 2 overlay with information from specific JSON objects based on an ID stored in a data-* attribut ...

jqueryjsonhtml

Using Jquery to dynamically adjust the size of a div based on the width and height of the browser window

How can I dynamically change the height of a .test div based on the browser width and height? I want the value to update whenever the browser is resized. $(document).ready( function() { window.onresize = function(event) { resizeDiv(); ...

javascriptjqueryhtmlcss

What causes hyperlinks to fail in certain emails when opened in new tabs on Outlook Webmail?

After opening an email in a new tab on Chrome from Outlook 365 web app, I noticed that some hyperlinks stop working. Strangely, for certain emails I received, the hyperlinks work fine. I create these emails using Power Automate and the HTML code I use is: ...

htmlcssgoogle-chromeoutlook-web-app

Why is `li:lt(4)` not capturing all list items with an index less than 4?

This is the HTML code I am working with: <ol id="front-page"> <li> <img src="images/defaultImage.gif" alt="Default Image" /> <a href="#" title="Title Entry">Title Entry</a> </li> <li> <img src="imag ...

jqueryhtmljquery-selectors

Issues with the Tumblr platform's back-to-top button functionality

I am quite comfortable with HTML and CSS, but I'm struggling to make the 'back to top' button work on my Tumblr page. Can someone please give me a hand? I've included some JQuery code to make the text fade in and out when scrolling (inf ...

javascriptjqueryhtmlcss

Responsive Bootstrap 5 table - occupies full width on mobile devices, adjusts automatically on desktop screens

Is there a way to create a table that is full width on mobile using pure bootstrap classes, but only auto width on desktop? I attempted to achieve this with the following code: <table class="table table-bordered w-md-auto w-100 text-start mb-2&quo ...

htmlcssbootstrap-5

Tips for implementing a CSS class on a select dropdown in multiple web pages

Having multiple dropdowns (select boxes) on my website has led me to desire different alignments for them. For instance, I would like one dropdown to be centered on a specific page while another should appear on the right side of a separate page. Since my ...

css

Create a radial-gradient() that covers two separate elements

Seeking to create a spherical appearance for a circle made of two semi-circular divs using background: radial-gradient(). Any ideas on achieving this effect without combining the two semi-circle divs into one circular div? [The decision to use two semi-ci ...

cssradial-gradients

Is there a way to calculate the total of three input values and display it within a span using either JavaScript or jQuery?

I have a unique challenge where I need to only deal with positive values as input. var input = $('[name="1"],[name="2"],[name="3"]'), input1 = $('[name="1"]'), input2 = $('[name="2"]'), input3 = $('[name=" ...

javascripthtmljquery

Modify the colors of multiple texts using a concise code block of fewer than 20 lines

I have 8 paragraphs and I want to toggle the class 'one-active' when clicking on each of them, while removing the active class from the others. I currently have the code working for two paragraphs, but it's too lengthy for all eight. How can ...

javascripthtmlcss

Steps to programmatically obtain the code for a contentPlaceHolder

I am seeking a way to extract the code of a contentPlaceHolder utilizing various Html parsers. The challenge is that I require a url, which is not feasible due to it being a masterpage. Essentially, there is a select tag where you can choose an option, tr ...

javaandroidhtmlmaster-pageshtml-content-extraction