How to add Container in Navbar ?

Topic: How to add Container in Navbar ?

qyako pro asked 7 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 7 years ago

Could you please share your code with us?

Add comment

Bartłomiej Malanowski staff answered 7 years ago

0 0 Best answer

This works for me: Home Features Pricing Dropdown Action Another action Something else here

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

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

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