Typo3 BootStrap 3 navbar (typoscript)

Question

Hi I am new to typoscript and I need help in getting the menu working. The following typoscript will render the Bootstrap navbar, yet the menu is thrown out of the navbar completely without css styles.

 topnavigation = HMENU topnavigation.wrap ( <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.example.com">Brand</a></div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav"> </ul> </div> </div> </nav> ) topnavigation.entryLevel = 0 topnavigation { 1= TMENU 1 { expAll = 1 maxItems = 4 NO.wrapItemAndSub = <li>|</li> ACT = 1 ACT.wrapItemAndSub = <li class="active">|</li> IFSUB = 1 IFSUB.wrapItemAndSub = <li class="dropdown">|</li> ACTIFSUB = 1 ACTIFSUB.wrapItemAndSub= <li class="active dropdown">|</li> } 2= TMENU 2 { wrap = <ul class="dropdown-menu">|</ul> NO.wrapItemAndSub = <li>|</li> ACT = 1 ACT.wrapItemAndSub = <li class="active">|</li> } } 

Please help

Answer 1

You haven't pipe symbol in your topnavigation.wrap anywhere...

Each wrap should use pipe symbol | in the place where the wrapped content should be placed, as ie in your TMENU:

NO.wrapItemAndSub = <li>|</li>

Anyway your general wrap with this whole Bootstrap markup doesn't have it, most probably that's the reason of wrong rendering...

Most probably it should be somewhere there:

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

BTW, use browser's inspector tools to check what's missing, we can only guess.

Answer 2

Biesior, thanks for pipe suggestions, it did set me in the right direction. After a load of research and hacking (not being a coder and alien to typoscript), I managed to get the bootstrap 3 inverse navbar working correctly with in typo3.

The following code works out of the box.

 topnavigation = HMENU topnavigation.wrap ( <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://www.example.com">Your Company Name or Logo</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse"> <ul class="nav navbar-nav">|</ul> </div><!-- /.navbar-collapse --> </div><!-- /.container --> </nav> ) topnavigation.entryLevel = 0 topnavigation { 1 = TMENU 1 { expAll = 1 NO.allWrap = <li>|</li> NO.ATagTitle.field = abstract // description // title ACT = 1 ACT.wrapItemAndSub = <li class="active">|</li> ACT.ATagTitle.field = abstract // description // title IFSUB = 1 IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown"> IFSUB.after = <b class="caret"></b></a> IFSUB.doNotLinkIt = 1 IFSUB.wrapItemAndSub = <li class="dropdown">|</li> IFSUB.ATagTitle.field = abstract // description // title ACTIFSUB = 1 ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown"> ACTIFSUB.after = <b class="caret"></b></a> ACTIFSUB.doNotLinkIt = 1 ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li> ACTIFSUB.ATagTitle.field = abstract // description // title } 2 = TMENU 2 { expAll = 1 ACT = 1 ACT.wrapItemAndSub = <li class="active">|</li> ACT.ATagTitle.field = abstract // description // title ACTIFSUB = 1 ACTIFSUB.wrapItemAndSub = | ACTIFSUB.before = <li class="divider"></li><li class="nav-header"> ACTIFSUB.after = </li> ACTIFSUB.doNotLinkIt = 1 ACTIFSUB.ATagTitle.field = abstract // description // title NO.allWrap = <li>|</li> NO.ATagTitle.field = abstract // description // title IFSUB = 1 IFSUB.before = <li class="divider"></li><li class="nav-header"> IFSUB.after = </li> IFSUB.doNotLinkIt = 1 IFSUB.ATagTitle.field = abstract // description // title SPC = 1 SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li> wrap = <ul class="dropdown-menu">|</ul> } 3 = TMENU 3 { NO.allWrap = <li>|</li> NO.ATagTitle.field = abstract // description // title ACT = 1 ACT.wrapItemAndSub = <li class="active">|</li> ACT.ATagTitle.field = abstract // description // title } } 

Remember to refer to the extension in the main page (fileadmin/your_template/layouts/your_main_page.html)

<f:cObject typoscriptObjectPath="topnavigation" />