Active and Inactive parent links

Kirby 2 Solved ✅
1

I have a parent element (Editions) which hides its children from displaying in the menu. Id like all of the other dropdown toggles in my menu to be inactive, serving only as toggling headers for the items below—but in the case of the Editions toggle I need it to be active and appear to be a regular link rather than a nested toggle.

Currently all toggles are active, but not on page load. You must click on something else first for the toggle links to become active. Im not certain of why this is.

Here is the page: http://www.shandakenprojects.org/dev/

Any suggestions are greatly appreciated.

Ryan

2

I see a lot of javascript errors in the console, maybe they are preventing your navigation from working properly.

3

Thank you for your response, I relinked some of the js files that were broken and it seems to have made all of the toggles inactive. This would be fine if I can choose to make my Editions link an active, non-toggling link. Is this possible? Thanks again, Ryan

4

You need an if statement that checks if the page is “editions” (by UID or intended template, whatever fits best) and if so, don’t give your li tag the class dropdown and remove all the unnecessary attributes from the a tag, so that you get a normal link like this:

<li><a href="#link-to-page">Link</a></li>
5

That makes perfect sense and I appreciate your response, but the implementation is perhaps a bit over my head. The code looks like this:

          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
<?php foreach($pages->visible() as $p) { ?>
  <?php if(($p->hasVisibleChildren() && $p->template() != 'posts')) { ?>
			<li class="dropdown<?php e($p->isOpen(), 'active') ?>">
				<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?> <span class="caret"></span></a>
				<ul class="dropdown-menu" role="menu">
					<?php foreach($p->children()->visible() as $p) { 
						if ($p->parent()->slug() != "editions") {
					?>
					<li<?php e($p->isOpen(), ' class="active"') ?>>
						<a class="page-<?php echo $p->slug() ?>" href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
					</li>
					<?php
						}
					} ?>
				</ul>
			</li>
  <?php } ?>
<?php } ?>
</ul>

Could you please help me place the correct statement in order to execute what you’re referring to? Thank You, Ryan

6

This should work:

<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <?php foreach($pages->visible() as $p): ?>
      <?php if(($p->hasVisibleChildren() && $p->template() != 'posts')): ?>
    			<li class="dropdown<?php e($p->isOpen(), 'active') ?>">
    				<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?> <span class="caret"></span></a>
    				<ul class="dropdown-menu" role="menu">
    					<?php foreach($p->children()->visible() as $p): ?>
    					  <li<?php e($p->isOpen(), ' class="active"') ?>>
    						  <a class="page-<?php echo $p->slug() ?>" href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
    					  </li>
    					<?php endforeach ?>
    				</ul>
    			</li>
      <?php elseif($p->template() == 'posts'): ?>    
        <li class="<?php e($p->isOpen(), 'active') ?>">
          <a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
        </li>
      <?php endif ?>
    <?php endforeach ?>
  </ul>
</div>

I’d also remove the url from the href attribute of the parents that are not supposed to be directly accessible. Also, make sure to reroute those pages to the error page or wherever, in case someone tries to access them via their URL.

7

Thank you for your response. The code you posted looks like its changing the styling of the parent throughout the entire menu—but the children of Editions are now visible and the parent link is still inactive. Is there a way to only target ‘editions’. The new menu is here: http://www.shandakenprojects.org/dev/

Thanks again for your help. Ryan

8

What is the template you use for the Editions page? I thought it was posts?

9

its a template called “editions”

10

The replace posts with editions in the above code and it should work.

11

That worked! The only strange thing is that it is causing the parent links to restyle when the children are active.

12

It’s not really strange, that is done by the bootstrap script, but it actually makes sense, doesn’t it?

13

The desired effect is that the headers remain consistent (not changing styles or becoming links when their children are selected). Here is the original source of the sidebar code- you can see there is an example of what I’m going for http://www.samrayner.com/bootstrap-side-navbar/#solved

It looks as if the styling from when the navigation is collapsed, as it would be on mobile, are now getting applied when its not collapsed.

14

I should also say that when I added the code you gave me which caused the editions to work properly, this styling change took place. Prior to that the parent dropdowns looked as they do in the link to sams bootstrap side navbar above.

15

Oh, sorry, it’s not the javascript, it’s this line:

<li class="dropdown<?php e($p->isOpen(), 'active') ?>">

that adds the active class, but that is your original code…

16

Perfect. Thank you. Can I send you flowers?