navbar alignment

Topic: navbar alignment

khilliard free asked 5 years ago

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.

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

<p>Here's the example code for right aligned navbar items:</p>

<pre class="prettyprint"><code>  <mdb-navbar  dark color="primary" scrolling>
    
    <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>
        
        <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>
</code></pre>

<p>Best regards</p>

Please insert min. 20 characters.

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

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: 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

khilliard

35Support score
7Questions 0Answers 0Snippets