I’m trying to replicate a Bootstrap menu for a site I’m migrating to Kirby.
The menu is working except its got a drop down for the Blog page which I don’t want (as it will have over 500 articles when I’ve migrated them all …)
https://www.cow-shed.co.uk/
I have tried to hardcode the menu snippet so that it treats the Blog page in the same way as a page with no children but its not working (probably my bad php). Is there a way I can make it work? (I will post the menu snippet as a 1st comment as its long).
I also tried to use the approach in the cookbook for menus so I could choose which pages are in the menu but my site.yml is ignoring the cookbook text I have added.
site.yml code
title: Site
preset: pages
unlisted: true
mainMenu:
type: pages
label: Main menu pages
nestedMenu:
type: structure
label: Nested menu
fields:
menufields: fields/menufields
hasSubmenu:
type: toggle
text: Add a submenu?
submenu:
type: structure
label: Second Level Items
when:
hasSubmenu: true
fields:
menufields: fields/menufields
Menu Snippet
<?php
// nested menu
$items = $pages->listed();
// only show the menu if items are available
if($items->isNotEmpty()):
?>
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="<?= $site->url() ?> ">
<img class="logo" src="https://www.cow-shed.com/cow-shed-images/cow-shed-logo/cow-shed-logo-250.png" style="width: auto" alt="Cow-shed web design Guildford Surrey"/>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<?php foreach($items as $item): ?>
<?php
// get all children for the current menu item
$children = $item->children()->listed();
// display the submenu if children are available
if($children->isNotEmpty()):
?>
<?php
// if not blogging
if($item->menu() != 'Blog')
?>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"
<?php e($item->isOpen(), ' class="active"') ?> href="<?= $item->url() ?>">
<?= $item->menu()->or($item->title())->upper() ?>
</a>
<div class="dropdown-menu">
<?php foreach($children as $child): ?>
<a class="dropdown-item" <?php e($child->isOpen(), ' class="active"') ?> href="<?= $child->url() ?>"><?= $child->title()->html() ?></a>
<?php endforeach ?>
</div>
</li>
<?php
elseif($children->isEmpty()):
?>
<li class="nav-item">
<a class="nav-item" <?php e($item->isOpen(), ' class="active"') ?> href="<?= $item->url() ?>">
<?= $item->menu()->or($item->title())->upper() ?>
</a>
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
</div>
</div>
</nav>
<?php endif ?>
There’s an endif missing. But you don’t really need that additional if statement but can combine it with the one before
if($children->isNotEmpty() && $item->menu() != 'Blog'):
However, I wouldn’t rely on the menu entry but check the template instead as that’s probably less likely to change
if($children->isNotEmpty() && $item->intendedTemplate()->name() !== 'blog'):
On a side note: Please always wrap blocks of code within three backticks on a separate line before and after the block.
1 Like