Navbar brand and items are not aligned and active item is no

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.

Add comment

Mikołaj Smoleński staff answered 5 years ago

0 0 Best answer

<p>Here's the example code for the working navbar:</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 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

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

khilliard

35Support score
7Questions 0Answers 0Snippets