Bootstrap navbar toggle not functioning

Hello :slight_smile:
So I’ve searched the whole internet and still can’t find the solution to this problem:

I’m playing about with Bootstrap on CodePen and learning on the way. I’m trying to make a toggle-able navbar for smaller screens. When I shrink the screen size the ‘hamburger’ icon appears but when clicked it acts funny -

  1. It appears in the uncollapsed state
  2. When clicked it collapses then uncollapses!

Why is this? Have I missed something?

Here’s the link to my CodePen and I would appreciate any help.

It is because of the flex classes d-flex justify-content-center you have added to the #navbarBasic element.

<div class="collapse navbar-collapse d-flex justify-content-center show" id="navbarBasic">

If you remove the flex classes it should work.

You can do the alignment on the ul instead. Using an auto margin mx-auto and align-items-center should give about the same result.

<ul class="navbar-nav mb-2 mb-xl-0 mx-auto align-items-center">

You are a life saver - I was stuck for hours!
I also figured out that I can use justify-content-center in the <div> that wraps the ul. Gives the same result also.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.