CODEWITHSUNDEEP
typo3typoscript
Philip
Philip

Reputation: 3

Typo3, fluid, bootstrap navigation bar

I'm trying to get the navigation bar of my first website to work but I can't find my mistake.. I'm working with Typo3, Fluid and Bootstrap. When I create a navigation bar manually in my template file it works perfectly fine but whatever I try in this typoscript file, the navigation bar items are only normal links instead of nav-items.

lib.navbar = HMENU
lib.navbar {
entryLevel = 1

1 = TMENU
1 {
    wrap = <ul class="navbar-nav">|</ul>
    NO = 1
    NO {
        wrapItemAndSub = <li class="nav-item">|</li>
        stdWrap.htmlSpecialChars = 1
        ATagTitle.field = title 
    }

    ACT <.NO
    ACT {
        wrapItemAndSub = <li class="nav-item active">|</li>
    }
}
}

I call the file in my template like this

<f:cObject typoscriptObjectPath="lib.navbar" />

This simple copy pasta in my template works

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
  <li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

</div>
</nav>

It seems like the 

wrap = <ul class="navbar-nav">|</ul>

gets ignored but when I try 

wrap = <h1><ul class="navbar-nav">|</ul></h1>

the h1 works.

Edit: Fixed it with this line:

ATagParams = class="nav-link"

Upvotes: 0

Views: 762

Answers (2)

Philip
Philip

Reputation: 3

Thanks, but it has the same problem. I found the reason though. The pages names are still inside an 

<a href="index.php?id=1">

When I manually change it to 

<a class="nav-link" href="index.php?id=1">

it works. But I don't know where this comes from in my code or how I can change it.

Upvotes: 0

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

You can try below menu typoscript.

lib.navbar = HMENU
lib.navbar{ 
  1 = TMENU
  1{
    expAll = 1
    wrap = <ul class="navbar-nav mr-auto">|</ul>
    NO {
        allWrap = <li class="nav-item"> | </li>
        ATagParams = class="nav-link"
    }

    ACT = 1
    ACT {
        wrapItemAndSub = <li class="nav-item active"> | <span class="sr-only">(current)</span></li>
        ATagParams = class="nav-link"
    }
  }
}

Upvotes: 0

Related Questions