Bootstrap navigation bar centered alignment

Check out my JSFiddle link showcasing my HTML/Bootstrap code. 

<body>
    <h1 style="text-align:center">AntwerPay</h1>
    <!--Navbar-->
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">AntwerPay</a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class=""><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                           Areas
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Area 1</a></li>
                        </ul>
                    </li>
                    <li><a href="#">All Areas</a></li>
                </ul>
            </div>
        </div>
    </nav>


</body>

In the navbar, everything is currently aligned to the left which I want to change. The navbar-brand should be on the left while the other buttons are centered. Despite trying various CSS codes I found through research, none have successfully solved this issue for me.

javascripthtmlcsstwitter-bootstrap

Answer №1

If you want to adjust the position of items using CSS, here's a suggestion:

.navbar .navbar-nav {
 display: inline-block;
 float: none;
 vertical-align: top;
 /* Remember to update this when adding items to the nav-bar */
 margin-right: 10%;
}

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

You can find a similar answer here

Check out your updated fiddle here

Answer №2

utilize this code snippet

.navbar-bav { float: none !important; text-align:center; }
.navbar-nav > li { display:inline-block; float: none !important; }

Check out the updated fiddle here

Please Note

If you are unsure about how to make the navbar responsive, ensure to incorporate the provided codes within a @media (min-width: 768px) query to maintain Bootstrap Navbar's responsiveness.

Answer №3

Here is a solution that may help you:

#mainNav {
  text-align: center;
}
.navbar-links {
  margin: 0 auto;
  display: inline-block;
  float: none;
}

Be sure to test it on mobile devices as well.

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

I'm having trouble locating my JavaScript files while trying to render a dynamic webpage

My navbar is set up to link to a dynamic web page like this <li class="<%= title == 'Cryptofolio' ? 'navbar-item active' : 'navbar-item' %>"> <a class="nav-link" href="/cryptofolio/< ...

javascriptnode.jsexpress

Using jQuery Ajax-load to replace a page with a div in IE9 without needing to switch to developer tool mode

I am currently developing a website that includes a page featuring a list of articles with the option to filter them based on specific keywords. These keywords are displayed as links next to the list. To obtain the correct URLs, each link holds part of the ...

javascriptjqueryajaxinternet-explorer

Setting the default value in a Reactive form on the fly: A step-by-step guide

When creating a table using looping, I need to set the default value of my Reactive Form to `Repeat` if the loop value matches a particular character, otherwise I want it to be empty. Here is my code: typescript rDefault:string = ""; create(){ ...

javascriptangulartypescript

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

PWA JavaScript struggling with GPS geolocation coordinates

I am experiencing issues with the GPS coordinates being stuck when using geolocation in a Progressive Web App (PWA). Sometimes, the coordinates get stuck at the previous location, even if the user has moved since then. I suspect that this is due to the GP ...

javascriptjquerygeolocationgpsprogressive-web-apps

Is it possible to trigger the Facebook Pixel Code using the <noscript> element through programming?

Is there a way to programmatically call the Facebook Pixel Code using noscript? I am facing an issue with the Facebook Pixel Helper extension breaking when the script and noscript code are separated. Can a function be wrapped around the code or built in th ...

javascriptjqueryfacebookdotnetnukenoscript

Guide for setting the line-height of a textarea in IE6/7

Is it possible to retrieve the line-height of a textarea in IE6/7 using a specific pixel value, rather than a string like "normal"? ...

javascriptjqueryinternet-explorer-7internet-explorer-6

Switched from btao to Buffer, however encountering a TypeError while trying to push to Vercel

I am currently working on an application in Next.js where I need to encode my image to base64. Initially, I used btao and it worked well until I tried deploying to Vercel, which resulted in an error stating that btao was undefined. After researching a solu ...

javascriptbase64next.jsvercel

Getting started with `sessionStorage` in a React application

Currently, I am attempting to save an item in sessionStorage prior to rendering. The code snippet I have looks like this: componentWillMount() { sessionStorage.setItem("isUserLogged", false); } However, I encountered an error stating th ...

javascriptreactjs

Submit an image in base64 format

My plugin crops images and returns them as base64 data, like this: data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQ.... How do I then upload this image to my server using a file upload field in my form? PS: Essentially, I want the returned image to be automa ...

javascriptphpjquerybase64

Is it possible to select options in AngularJS based on certain criteria?

I created an AngularJS select menu that is currently functioning correctly: <select name="s1" id="s1" multiple="multiple" data-native-menu="false" data-role="none" ng-model="userlistSelect" ng-options="u.userId as u.fi ...

javascriptangularjs

What methods can be used to restrict the user from typing at the very end of a scrollable textarea?

Hello there, I hope everything is going well for you! I'm currently working on a project with a basic code editor and trying to find the best way to add some space at the bottom of the textarea. I don't want users to always be typing right at th ...

jqueryhtmlcsstextareavertical-scrolling

Setting a timezone for every request in Node.js based on a specific post parameter

I have developed a REST application using Node.js Express and now I aim to expand its reach to different countries. One hurdle I am facing is that all my date and time operations are currently based on the local timezone, which could pose an issue if reque ...

javascriptnode.jsdatetimeexpress

Strategies for updating arrays in Redux state

I am currently working on developing a project similar to "Trello" using react, redux, nodejs, and mongoDB. However, I have encountered an issue where when I add a card to a list, the redux state is not updated. As a result, I can only see the newly added ...

javascriptreactjsmongodbreduxnodes

List arranged in order with a hyperlink in the center and an image positioned on the right side

I am trying to create an ordered list with a link to an article in the middle and a small png image file positioned directly to the right of it. For reference, here is an image depicting the exact type of list that I am aiming to achieve: https://i.stack. ...

htmlcss

Utilizing jQuery to style and remove styles from a clicked radio button by leveraging parent() and next() methods

In my project, I have 3 identical sections that are exactly the same as each other. What I want to achieve is a functionality where when I click on the ".rad1" (first radio button), its label gets styled. Similarly, when I click on ".rad2", it should remov ...

javascriptjqueryhtmlcss

Ways to ensure that a JavaScript code runs only once within React components

I am working on implementing file upload with preview and here is the code for my component: const [uploadField, setUploadFiled] = useState() useEffect(() => { const temp = new FileUploadWithPreview('fileUpload', { multiple: multi ...

javascriptreactjs

Mastering the placement of lights in ThreeJS

Struggling for nearly half an hour now, attempting to place a pointlight at the base of my model, but achieving dismal outcomes. Not sure of the dimensions of my model, and consistently failing to accurately pinpoint the light within the scene. Thought ab ...

javascriptthree.js

Wrap HTML attributes with double quotes using JavaScript

My goal is to add " around attributes that are missing them, using JavaScript. For example: <a class=external title=Title href="http://www.google.com" rel=external>My link</a> Should become: <a class="external" title="Title" href="http:/ ...

javascriptregexxhtmlreplace

Vue - Pull out several components from main file

In my Vue.js project, I have been using the .vue component specs format to write components. An interesting observation I made is that plain JavaScript can export these components when loaded from vue files. For instance, a component defined in index.vue c ...

javascriptvue.jsvuejs2