Centered nav with logo

Kirby 2 Solved ✅
,
1

Hello, I am trying to get a a nav with links on either side of a logo. Having trouble with the php for this…
Example here:

Using flex box justify center and ordering.

Main problem I’m running into is the logo is obviously being being output the amount of list items

<nav>
<?php foreach($pages->visible() as $item): ?>
<li class="menu-item<?= r($item->isOpen(), ' is-active') ?>" >
  <h1 class="logo">
  <a href="<?php echo $site->url() ?>">
  <?= (new Asset("assets/images/logo.svg"))->content() ?>
  </a>
</h1>
	<a class="item" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
	</li>
	<?php endforeach ?>

2

I’d split this:

(Note that your HTML is not correct, the ul element is missing and you can only have li elements within a list)

<?php
$limit = $pages->visible()->count() / 2; //maybe round to make sure you only get int
$navItems1 = $pages->visible()->limit($limit);
$navItems2 = $pages->visible()->offset($limit);
?>
<nav>
  <ul>
    <?php foreach($navItems1 as $item): ?>
      <li class="menu-item<?= r($item->isOpen(), ' is-active') ?>" >
         <a class="item" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
      </li>
    <?php endforeach ?>
    <li>
       <h1 class="logo">
       <a href="<?php echo $site->url() ?>">
           <?= (new Asset("assets/images/logo.svg"))->content() ?>
       </a>
       </h1> 
     </li>
     <?php foreach($navItems2 as $item): ?>
        <li class="menu-item<?= r($item->isOpen(), ' is-active') ?>" >
          <a class="item" href="<?= $item->url() ?>"><?= $item->title()->html() ?></a>
        </li>
     <?php endforeach ?>
  </ul>
</nav>
3

This works as far as positioning goes, but for some reason the nav links are not actually visible. I can inspect and see the items in place where they are supposed to be, but it’s almost as if there is a display:none property. Not sure what the deal is. Thanks in advance.

4

Check your stylesheet, if you use the Starterkit, adjust the font size for the anker element.

1 Like