Is there a way to position the Bootstrap navbar menu items in the center specifically for mobile devices?

I have a navbar that I want to center the menu li items when it collapses.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9dbd6d6cdcacdcbd8c9f98c978b978b">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </ul>
  </div>
</nav>

My initial solution involved using div elements within the list items, however this is not valid HTML.

<ul class="navbar-nav ms-auto me-4 my-3 my-lg-0">     
    <div class="d-flex flex-row justify-content-center">           
        <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
    </div>
    <div class="d-flex flex-row justify-content-center">
        <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </div>
</ul>

Although this workaround does center the items, it is not the correct way to achieve this in HTML.

Any suggestions on how to properly center the menu items in the collapsed navbar?

csstwitter-bootstrapflexboxbootstrap-5

Answer №1

One potential solution could involve selectively applying text alignment for the smaller breakpoint(s).

Please note: The d-block class has been added to the collapse element for demonstration purposes only. Check out the full page demo for an alternative layout.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b5d7dadac1c6c1c7d4c5f5809b879b87">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="myNav">
  <div class="collapse navbar-collapse d-block">
    <ul class="navbar-nav ms-auto me-4 my-3 my-lg-0 text-center">
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 1</a></li>
      <li class="nav-item"><a class="nav-link me-lg-3">Menu Item 2</a></li>
    </ul>
  </div>
</nav>

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

How to position text in the center of a video using CSS

My attempt to center the name of my blog on top of a video background was not successful, even though I tried positioning it absolutely with 50% from the top. Can someone assist me in vertically and horizontally centering the text over the video? Here is ...

htmlcssvideotext

Thumbnail vanishes upon being selected

To access my template site currently, please click here. Currently, the first thumbnail on my website is set up to display a gallery of images in FancyBox once clicked, similar to a question asked on StackOverflow that you can view here. Below is a snipp ...

jqueryhtmlcssfancybox

A square containing two triangular interactive zones

My goal is to divide a square-shaped div diagonally, creating two triangles. Each triangle should respond to the hover event. However, I have encountered a problem where if you move from one corner of the div directly to the opposite corner, the hover eve ...

javascriptjqueryhtmlcss

Ways to display or conceal multiple div elements using JavaScript

A group of colleagues and I are currently collaborating on a project to create a website showcasing our research. We have incorporated 1 page that contains detailed descriptions of six different subjects: system biology, proteomics, genomics, transcripto ...

javascripthtmlcsshideshow

angular - apply custom background styles without resorting to disabling ViewEncapsulation

I can't seem to figure out why I'm struggling to set the background of my component correctly without having to use ViewEncapsulation.None. Currently, with ViewEncapsulation.None, my styles look like this: * { margin: 0; padding: 0; ...

cssangular

Tips for switching out images depending on the time of day

Currently, I have a script that dynamically changes the background color of my webpage based on the time of day. However, I am facing issues trying to implement a similar functionality for replacing an image source. The current code is also time zone-based ...

javascriptjqueryhtmlcss

Fluid background images frame the header on either side, with a void of background in the center

I am in need of a header that spans the entire width and is divided into 3 columns, with background images only in the 1st and 3rd columns. Cross-browser compatibility is crucial for this solution. The first column should have a background image and be ...

htmlcss

Having trouble with CSS margins behaving unexpectedly

Could someone please explain why I am unable to add margin-top/bottom or padding-top/bottom to this "a" tag? I am trying to center "Konoha" in the header box. html{ background-color: white } body{ width: 88.5%; height: 1200px; margin: 0 auto; borde ...

htmlcss

What steps should I take to establish an efficient folder organization system for a website utilizing HTML, CSS, and Javascript with Twitter Bootstrap?

After cloning the latest release of Twitter Bootstrap using Git with the command 'git clone git://github.com/twbs/bootstrap.git', I am in the process of creating an HTML/CSS site utilizing Bootstrap. Upon reviewing this answer on Stack Overflow ( ...

csshtmltwitter-bootstrap-3

Issue with Bootstrap carousel - the carousel.on method is not recognized

I have implemented a standard Bootstrap carousel in my project: <div id="myCarousel" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"> ...

javascriptjqueryhtmlcsstwitter-bootstrap

Edge and Internet Explorer fail to recognize the :focus CSS selector

I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might ...

cssinternet-explorerfocusmicrosoft-edge

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

javascriptcssangularjscanvasd3.js

Prevent the bootstrap collapse hide feature from functioning when content is already visible or expanded

I have a simple question. I would like to utilize the Bootstrap 3 collapse function to display some content, but without the ability to hide it when clicking on the link or button. Basically, I want the content to appear when clicking on the link or butto ...

jquerytwitter-bootstrap

The datepicker in Angular Material refuses to open when used within a modal dialog box

I successfully integrated an angular material 2 date-picker into a bootstrap modal form: <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h ...

htmlcsstwitter-bootstrapangularangular-material2

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

Is it possible to adjust the position of a h2 heading on a particular webpage using CSS?

There is a situation where multiple pages contain h elements nested inside a standard container div class. When trying to edit a specific h2 element in a specific page using CSS, simply editing the h2 or the container does not work. Other methods attempte ...

jqueryhtmlcsscontainers

Carousel issue with sliding on Bootstrap when deployed on various web servers

I am experiencing a strange issue with my website. I have it installed on two different servers, and while the Carousel works perfectly fine on the first server, it does not slide properly on the second server. Here are the links to each version of the we ...

htmltwitter-bootstrap

Adjust the height value of each element to match the maximum height within a single line using only CSS

There are 3 divs styled with display:inline-block. I aim to adjust their height values so they match the highest one. The desired effect is demonstrated visually below. Is it doable using only CSS? ----- ----- ----- ----- ----- ---- ...

htmlcss