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