2

My site is built on Bootstrap 3 framework and I am using NavEE as the navigation plugin. One thing I cannot figure out is how to implement the conditionals required to build out the navigation structure eg. if there are children nav items then display modified mark-up as required in Bootstrap.

Below is the Bootstrap structure I need to create using NavEE:

<ul class="nav navbar-nav">
  <li class="active"><a href="/">Home</a></li>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Options <b class="caret"></b></a>
    <ul class="dropdown-menu">
      <li><a href="#">Option 1</a></li>
      <li><a href="#">Option 2</a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us</a></li>
</ul>

I can easily create the top-level navigation using the basic NavEE syntax:

{exp:navee:nav nav_title="main" class="nav navbar-nav" selected_class="active"}

I have tried using the custom NavEE syntax but have found the documentation limited so have not been able to work out the correct conditionals:

{exp:navee:custom nav_title="main" class="nav navbar-nav" selected_class="active"}
   <li class="{class}"><a href="{link}">{text}</a>{kids}</li>
{/exp:navee:custom}

I want to be able to say something like this:

{exp:navee:custom nav_title="main" class="nav navbar-nav" selected_class="active"}
   <li class="{if kids}dropdown{/if}"><a {if kids}class="dropdown-toggle" data-toggle="dropdown"{/if} href="{link}">{text}{if kids} <b class="caret"></b>{/if}</a>{kids}</li>
{/exp:navee:custom}

Even if I could get that to work I still need to target the nested UL.

I have used Taxonomy in the past and have been able to create the required Bootstrap 2 navigation structure:

{exp:taxonomy:nav 
tree_id="1" 
display_root="no" 
ul_css_class="nav" 
ul_css_class:level_2="dropdown-menu"
entry_id="{entry_id}"
}
<li class="{if node_has_children}dropdown{/if}{if node_active} active{/if}">
    <a{if node_has_children} class="dropdown-toggle" data-toggle="dropdown"{/if} href="{node_url}">
    {if node_has_children}<b class="icon-chevron-down"></b> {/if}{node_title}
    </a>
{children}
</li>

{/exp:taxonomy:nav}

Any assistance in allowing me to control NavEE in the same way I have been able to with Taxonomy would be greatly appreciated.

Thanks,
Dan

2

After days or trying to work it out and then finally posting my question on EESO I actually stumbled across the answer (literally minutes after posting my question).

Brandon Richards posted the answer on The Outfit, Inc forum (https://getsatisfaction.com/booyant/topics/twitter_bootstrap#reply_14550626).

Below is how you can achieve Bootstrap 3 navigation structure using NavEE:

<ul class="nav navbar-nav">
{exp:navee:custom nav_title="main" wrap_type="none" selected_class="active" selected_class_on_parents="true" parent_selected_class="active"}
    {if has_kids}
        <li{if has_kids} class="dropdown"{/if}>
            <a href="{link}" class="dropdown-toggle" data-toggle="dropdown">{text} <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li>{kids}</li>
            </ul>
        </li>
    {if:else}
        <li{if class != ""} class="{class}"{/if}><a href="{link}" title="{text}">{text}</a></li>
    {/if}
{/exp:navee:custom}
</ul>

Thanks Brandon!

| improve this answer | |
  • Brilliant, works perfectly – CreateSean Sep 12 '16 at 17:41
0

Well glad it helps, I haven't tried working in the seperators in the drop down or split navigations (left and right)

| improve this answer | |
  • Please make messages like these comments, thank you. – jrothafer Nov 23 '15 at 20:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.