My search for a solution to center the navigation in Bootstrap 4 led me to the discovery of the .mx-auto class, which worked perfectly. However, I encountered a drawback related to the brand size displayed before the navigation.
In this demonstration, I have modified the <ul> tag of the navigation from .mr-auto to .mx-auto to illustrate the issue I mentioned earlier.
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">…You can view the full example and result on JSFiddle, ensuring you check it in full-page view due to Bootstrap's responsiveness.
The challenge lies in centering the navigation without being affected by the brand size or mobile screen display. The proposed solution involves adjustments to the HTML structure and styling as shown in this updated example.