I'm having trouble getting my Bootstrap Navbar list aligned in the center

I've been attempting to align my menu list items in the center of the bootstrap navbar but have had no success. Despite trying various CSS styles, the items remain on the left side. Please take a look at my HTML and CSS below and let me know if there are any corrections needed. Specifically, my goal is to position those menu items directly beneath the logo.

<div class="header-botom">
            <div class="content white">
                <nav class="navbar navbar-default nav-menu" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="clearfix"></div>
                    <!--/.navbar-header-->

                    <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav nav-font">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Ear Rings</a></li>
                            <li><a href="#">Jewelry </a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!--/.navbar-collapse-->
                    <div class="clearfix"></div>
                </nav>
                <div class="clearfix"></div>
            </div

>
             </div> 

.nav-menu{
    background: transparent;
    border-radius: 0;
    border: 0;
    margin-top: 6px;
}
.navbar .{
    text-align:center;
}
.navbar-nav li{
    float: none;
    display: inline-block;
}



  [1]: https://i.sstatic.net/wxHSz.png
htmlcsstwitter-bootstrap

Answer №1

If you're searching for a solution, try incorporating these CSS properties:

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

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

This question may be a Duplicate of the one found here.

Check out this JS Bin example here

Answer №2

To customize your navigation menu, add the following CSS class:

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

See the demo below: 

.nav-menu {
  background: transparent;
  border-radius: 0;
  border: 0;
  margin-top: 6px;
}

.navbar . {
  text-align: center;
}

.navbar-nav li {
  float: none;
  display: inline-block;
}

.navbar-nav {
  text-align: center;
  background: #e4e4e4;
}
<div class="header-botom">
  <div class="content white">
    <nav class="navbar navbar-default nav-menu" role="navigation">

      <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav nav-font">
          <li><a href="#">Home</a></li>
          <li><a href="#">Ear Rings</a></li>
          <li><a href="#">Jewelry </a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </nav>
    <div class="clearfix"></div>
  </div>
</div>

Answer №3

It appears that I have found a solution to your issue, especially if you are utilizing bootstrap

Include the following class in your custom CSS file

.collapse-pdng { padding: 0px 0px; margin: 0 auto; width: 32%; }

Insert the provided class in your HTML file 

    <div class="text-center">
       <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav nav-font">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Ear Rings</a></li>
                            <li><a href="#">Jewelry </a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
    </div>

Simply add the text-center class in the div and place your entire menu within that class. Hopefully, this resolves your concern. Please inform me of any further assistance needed.

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

Creating HTML code from a website by utilizing XML

As someone who is not a developer and doesn't have much knowledge about java, I am seeking advice on potential solutions to achieve the following. This web hosting service enables users to retrieve data from their XML spreadsheets and embed them anyw ...

javajavascripthtml

Modifying JQuery function to target two IDs instead of just one

I am utilizing a bootstrap 5 tablist on my website that allows for navigating between tabs using custom left and right arrows. If I wish to introduce a second bootstrap 5 tablist with a new unique ID, how can I modify the code to integrate the new ID and e ...

javascriptjquerytwitter-bootstrap

The Bootstrap Hugo Documentation website is experiencing difficulties and displaying the error message "failure to render 'page'"

Currently, I have bootstraps' source code downloaded on my Mac along with all the necessary node packages installed. Upon attempting to run hugo --cleanDestinationDir --printUnusedTemplates (hugo is properly installed), I encountered the following err ...

htmlmacosterminalbootstrap-5hugo

Why doesn't ngSubmit function inside a modal?

I am experiencing an issue where my submit button is not activating the ng-click angular directive, and I cannot seem to identify the cause. Most people who faced a similar problem did not have their submit button placed inside their form, but I am confi ...

javascriptangularjstwitter-bootstrapbootstrap-modal

Creating a compilation of HTML file links using Gulp

Is there a way to utilize Gulp in order to compile a single HTML file containing links to all pages within a specific directory? For instance, if I have two files contact.html titled "Contacts" and faq.html titled "Frequently asked questions" located in t ...

htmlnpmgulp

What is the best way to display link icons - as images or using CSS background-image URLs?

When designing a web UI, I am considering using iconography to represent actions such as adding, editing, deleting, and searching for items. However, I want to ensure that the purpose of each action is clear without displaying text and cluttering the UI sp ...

cssasp.net-mvciconsbackground-imageimage

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

phphtmlfontswysiwyghtmlpurifier

Can I use Javascript to access a span element by its class name?

Similar Question: How to Retrieve Element By Class in JavaScript? I am looking to extract the text content from a span element that does not have an ID but only a specific class. There will be only one span with this particular class. Can anyone guide ...

javascripthtml

Can a circular design incorporating an arrow and gradient background be created?

I'm looking to create a circular design with an arrow and a gradient inside that can adjust dynamically based on screen resizing. I know it can be done using an image, but I'm wondering if it's possible to achieve this effect using just a si ...

htmlcss

The usage of an import statement is not permissible outside of a module

Having some trouble using the mathjs library to calculate complex solutions for the quadratic equation. No matter how I try to import the library into my code, I keep encountering errors. Initially, I attempted this method: At the top of my root.js file, ...

javascripthtmlnode.jsnpmimport

"Accessing and updating the current navigation state using jQuery/ajax when clicked

Currently, I'm working on a website project where I am using a jquery/ajax script to dynamically pull in content from another page with a fade effect when clicking on a tab in the navigation menu. You can check out the effect on the page here. Only th ...

jqueryhtmlcssajax

Show the chosen choice in a select dropdown with custom text using Angular

I successfully implemented this code snippet to display a dropdown list of countries and their phone codes. However, I encountered an issue where I need to only show the selected option's code without the country name. The first screenshot shows how i ...

javascripthtmlangulardrop-down-menu

Is it feasible to display a message for a certain duration without using the alert() function upon clicking a button?

I'm working on a NEXT.JS project and I need to display a <p> element under my button for a specific duration before it disappears. I don't want to use the alert() function. Any suggestions on how to achieve this? ...

javascripthtmlcss

Techniques for transferring information to Highchart directly from session storage

I am attempting to populate a pie highchart with data from a session storage variable, but I am not seeing any results. Here is the desired code: $(function () { Highcharts.chart('container', { chart: { type: 'pie', ...

javascripthtmlsessionhighchartssession-variables

Exploring methods to validate a Reactive Form in Angular 10+ by incorporating two groups within the formBuilder.group

I am looking to implement form validation with two separate groups within the main formBuilder.group. I am unsure of how to access the 'errors' value in my HTML [ngClass]. component.ts: createForm(): void { this.myForm = this.formBuilder ...

htmlangularangular-reactive-formsangular-formbuilder

Utilizing jQuery to display labels only for selected checkboxes while concealing the ones that are not checked

I currently have the following setup: <style>.selectit{display:none;}</style> <div id="foo"> <label class="selectit"> <input type="checkbox" name="one" id="one" checked> One </label> <label class="selectit"> <i ...

javascriptjqueryhtmlformsinput

Module not found in Node.js environment (webpack)

I seem to be encountering an issue with loading any modules. Despite reinstalling my operating system, I continue to face the same error when attempting to use any module. I have tried reinstalling node, clearing the cache, and more. To view the code, pl ...

cssnode.jswebpackcss-loader

Adjusting Flexslider to perfectly accommodate the height and width of the window dimensions

Currently, I am using Flexslider version 1.8 and seeking to set up a fullscreen image slider on my homepage. My goal is to adjust the slider to match the browser window size. While experimenting with width:100% and height:auto properties, I have managed t ...

javascripthtmlcssflexslider

Retrieve the stylesheet based on the presence of a specific class

Is there a way to dynamically add a CSS stylesheet based on the presence of a specific class on a page? For example, instead of checking the time and loading different stylesheets, I want to load different stylesheets depending on the class present in the ...

javascriptcssfunctionif-statement

Concealed file selection in Python Automation with Selenium

I'm experiencing an issue while attempting to upload a file to a hidden file input using Python Selenium. To provide more clarity, please refer to the image linked below. Example of Issue For the first field, I uploaded a file myself. Here's a ...

pythonhtmlselenium