Make Navbar toggler open on the right instead of the left

Hey, so I’m trying to make my navbar toggler open directly under the toggle button on the right side of the page instead of the left to avoid overlap issues with the heading. Otherwise, I need to move the header down when the navbar opens, but unfortunately I haven’t been able to do either. Any help or ideas would be much appreciated! Project: https://codepen.io/MarcelPenn/pen/VJBEPr. Sorry for the messy code

You can add d-flex and align-items-end to the ul

<ul class="d-flex align-items-end navbar-nav ml-lg-auto">

1 Like

Thank you so much, exactly what I was looking for. Are d-flex and align-items-end bootstrap classes? I’m assuming I could add “display: flex” and “align-items-end” to the ul CSS and it would be the same? I guess I should dig into a little more. Thanks!

Yes they are part of the flex utilities. You can add your own CSS but if there is a Bootstrap class that does what you need it might be better to just use it instead.

I guess it depends on the scope of the project but it will help communicate the layout to other people reading the HTML and looking at the Bootstrap classes.

1 Like

Awesome, thanks. Yeah the bootstrap classes seem cleaner and easier for sure, was just trying to wrap my head around it.