How to add Container in Navbar ?

Topic: How to add Container in Navbar ?

qyako pro asked 6 years ago

Im trying add <div class="container"></div> inside <navbar></navbar> but i got error message :

Error in mounted hook: "TypeError: Cannot read property 'classList' of undefined"

Bartłomiej Malanowski staff commented 6 years ago

Could you please share your code with us?

Add comment

Bartłomiej Malanowski staff answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

This works for me:

<navbar position="top" dark color="primary" name="Your Logo" href="#" scrolling>
 <container>
 <navbar-collapse>
 <navbar-nav>
 <navbar-item href="#" waves-fixed>Home</navbar-item>
 <navbar-item href="#" waves-fixed>Features</navbar-item>
 <navbar-item href="#" waves-fixed>Pricing</navbar-item>
 <!-- Dropdown -->
 <dropdown tag="li" class="nav-item">
 <dropdown-toggle @click.native="toggleDropdown(0)" tag="a" navLink color="primary" waves-fixed>Dropdown</dropdown-toggle>
 <dropdown-menu v-show="active[0]" >
 <dropdown-item>Action</dropdown-item>
 <dropdown-item>Another action</dropdown-item>
 <dropdown-item>Something else here</dropdown-item>
 </dropdown-menu>
 </dropdown>
 </navbar-nav>
 <!-- Search form -->
 <form class="form-inline">
 <md-input type="text" placeholder="Search" aria-label="Search" label navInput waves waves-fixed/>
 </form>
 </navbar-collapse>
 </container>
 </navbar>

Add comment

qyako pro answered 6 years ago

0 0 Best answer

<pre class="code-toolbar language-markup"><code class=" language-markup"><navbar class="indigo" name="Navbar" href="#"> 
<container>
 <navbar-collapse> 
 <navbar-nav> 
 <navbar-item href="#" active>Home</navbar-item> 
 <navbar-item href="#">Features</navbar-item> 
 <navbar-item href="#">Pricing</navbar-item> 
 <dropdown tag="li" class="nav-item">
 <dropdown-toggle tag="a" navLink color="indigo" waves-fixed>Dropdown</dropdown-toggle>
 <dropdown-menu>
 <dropdown-item>Action</dropdown-item>
 <dropdown-item>Another action</dropdown-item>
 <dropdown-item>Something else here</dropdown-item>
 </dropdown-menu>
 </dropdown>
 </navbar-nav> 
 <form class="form-inline"> 
 <input class="form-control mr-auto p-2" type="text" placeholder="Search" aria-label="Search"> 
 </form> 
 </navbar-collapse>
</container> 
</navbar></code></pre>
Here my code

Please insert min. 20 characters.

<navbar class="indigo" name="Navbar" href="#"> 
<container>
  <navbar-collapse> 
    <navbar-nav> 
      <navbar-item href="#" active>Home</navbar-item> 
      <navbar-item href="#">Features</navbar-item> 
      <navbar-item href="#">Pricing</navbar-item> 
      <dropdown tag="li" class="nav-item">
        <dropdown-toggle tag="a" navLink color="indigo" waves-fixed>Dropdown</dropdown-toggle>
        <dropdown-menu>
          <dropdown-item>Action</dropdown-item>
          <dropdown-item>Another action</dropdown-item>
          <dropdown-item>Something else here</dropdown-item>
        </dropdown-menu>
      </dropdown>
    </navbar-nav> 
    <form class="form-inline"> 
      <input class="form-control mr-auto p-2" type="text" placeholder="Search" aria-label="Search"> 
    </form> 
  </navbar-collapse>
</container> 
</navbar>

Here my code

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Vue
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

qyako

Pro User 12Support score
1Questions 2Answers 0Snippets