Topic: navbar alignment
By default navbar items are left justified, right next to the navbar brand. I'd like to right justify my navbar items. It tried using class="ml-auto" on the mdb-navbar-nav element but it only seems to align the nav items to the center.
Could someone provide some sample code that shows how to right justify the nav items.
Here's the example code for right aligned navbar items:
<mdb-navbar dark color="primary" scrolling>
<!-- mdbNavbar brand -->
<mdb-navbar-brand href="https://mdbootstrap.com/">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png" height="30" alt="">
</mdb-navbar-brand>
<mdb-navbar-toggler>
<mdb-navbar-nav right>
<mdb-nav-item href="#" waves-fixed active>Home</mdb-nav-item>
<mdb-nav-item href="#" waves-fixed>Features</mdb-nav-item>
<mdb-nav-item href="#" waves-fixed>Pricing</mdb-nav-item>
<!-- mdbDropdown -->
<mdb-dropdown tag="li" class="nav-item">
<mdb-dropdown-toggle slot="toggle" tag="a" navLink color="primary" waves-fixed>Dropdown</mdb-dropdown-toggle>
<mdb-dropdown-menu>
<mdb-dropdown-item>Action</mdb-dropdown-item>
<mdb-dropdown-item>Another action</mdb-dropdown-item>
<mdb-dropdown-item>Something else here</mdb-dropdown-item>
</mdb-dropdown-menu>
</mdb-dropdown>
</mdb-navbar-nav>
</mdb-navbar-toggler>
</mdb-navbar>
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Vue
- MDB Version: 4.8.2
- Device: pc
- Browser: chrome
- OS: windows 10
- Provided sample code: No
- Provided link: No