CODEWITHSUNDEEP
csstwitter-bootstrapflexboxbootstrap-5
pileup
pileup

Reputation: 3262

How can I center Bootstrap navbar menu items just for mobile?

I'm using the following navbar. I need to be able to center the menu li items when the navbar is collapsed.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

The solution I came up with was doing the following:

<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>

But as mentioned in the comments this is not a valid HTML - to have a div as a child of list element

It does work. But not valid - how can I properly center them then?

Upvotes: 1

Views: 178

Answers (1)

isherwood
isherwood

Reputation: 61056

It's probably just a matter of applying text alignment selectively for the smaller breakpoint(s).

Note: d-block added to the collapse element for demonstration here only. View the full page demo for the alternative layout.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 1

Related Questions