Topic: Navbar brand and items are not aligned and active item is not highlighted

khilliard free asked 5 years ago


I copied the example of a navbar into my project. When I ran this the "brand" is lower, in alignment, than the nav items. Also, the "Home" item is not highlighted like in the example.

Here is the template:

Navbar Home Features Pricing

As you can see, the "Home" item should be active and hightlighted but it's not.


Mikołaj Smoleński staff answered 5 years ago


Here's the example code for the working navbar:

  <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


khilliard free commented 5 years ago

Much thanks for providing the sample code. I tired it in my demo project. Everything aligns OK and the nav items are right justified the way I wanted. But the "Home" nav item is not highlighted. I ran the code in both chrome and edge browsers.

I'd like to post the code to my App.vue but when I pasted it into this form it appeared to be interpreted and was truncated. How do I paste code sample like you did?


Mikołaj Smoleński staff commented 5 years ago

You can add code by using the combination ctrl + K.

There is a working demo for navbar. You can download it from the following page: https://mdbootstrap.com/docs/vue/getting-started/download/

After download, please type npm install and then npm run demo. You will see that it's working correctly and You can check the code.

Best regards



Please insert min. 20 characters.

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 desktop
  • Browser: chrome, edge
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No