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 -
- It appears in the uncollapsed state
- 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
<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
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.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.