Zurb Foundation 6, sticky top bar navigation

Kirby 2 Solved ✅
1

Hej, I am trying to adjust the default Kirby theme and combine it with the latest Zurb Foundation 6 framework. Is there anybody around who works with Foundation and already tinkered with the update? My actual issue is a sticky top bar whose stickiness is not as reliable as it should be. Any help is appreciated very much.

Here is a link: Testsite
Scroll down, and the top bar vanishes. Or not? No, sometimes not. Click a little bit around and the bug will appear. The source code seems to be okay, but I simply cannot find the reason - maybe I don’t see the forest for the trees, maybe there is a conflict with Kirby.

Here is a working example: Codepen Foundation 6 top bar

2

The Kirby Starterkit does not use any JS, so there shouldn’t be any conflicts there. My guess is, that either your javascript does not work as it should, or maybe the markup is not what it is supposed to be.

3

I modified your markup a little bit. This works for me in Chrome, Firefox and Safari:

   <div id="page">
        <div data-sticky-container class="sticky-container" style="height: 86px;">
        	<div style="width: 100%; max-width: 1797px; margin-top: 0em; top: 0px; bottom: auto; left: 0px;" class="sticky is-stuck is-at-top" data-sticky="8qoug4-sticky" data-options="marginTop:0;anchor:stickhere;" data-resize="k03y85-sticky">
        		<div class="top-bar">
        			<div class="top-bar-left">
        				<ul class="dropdown menu" data-dropdown-menu="m8uvcs-dropdown-menu" role="menubar">
        					<li role="menuitem"><a class="logo" href="http://www.fischhobel.de/fh-kirby" tabindex="0"><img src="./test_files/logo.svg" alt="My Site"></a></li>
        					<li role="menuitem"><a class="menu-text" href="http://www.fischhobel.de/fh-kirby">My Site</a></li>
        					<li role="menuitem"><a href="http://www.fischhobel.de/fh-kirby/about">About</a></li>
                            <li class="has-submenu is-dropdown-submenu-parent is-down-arrow" role="menuitem" aria-haspopup="true" aria-selected="false" aria-expanded="false" aria-label="Projects"><a href="http://www.fischhobel.de/fh-kirby/projects">Projects</a>
        						<ul class="submenu menu vertical is-dropdown-submenu first-sub" data-submenu="" aria-hidden="true" role="menu">
									<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="./test_files/test.html">Project A</a></li>
									<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="http://www.fischhobel.de/fh-kirby/projects/project-b">Project B</a></li>
									<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="http://www.fischhobel.de/fh-kirby/projects/project-c">Project C</a></li>
									<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a href="http://www.fischhobel.de/fh-kirby/projects/project-d">Project D</a></li>
								</ul>
        					</li>
							<li role="menuitem"><a href="http://www.fischhobel.de/fh-kirby/contact">Contact</a></li>
                        </ul>
        			</div>
        			<div class="top-bar-right">
        				<ul class="menu">
        					<li><input type="search" placeholder="Search"></li>
        					<li><button type="button" class="button">Search</button></li>
        				</ul>
        			</div>
        		</div>
        	</div>
        </div>
4

May I suggest using plainkit, instead of starterkit?
This way you won’t have to override CSS or tweak the existing markup.
That could be the problem.

5

@heyallan, actually I only use 2 lines of the existing starterkit CSS, and also the navigation code is readjusted as a new menu.php in the snippet folder. So this does not cause the problem. But thanks for caring anyway!

6

@abroess, “a little bit” seems to be an understatement :slightly_smiling:! Thanks so much for having a look at this. I will study your suggestion and come back with a comment.

(Edit: my growing suspicion is that it is a bug in the F6 framework - they are still in their development with the new version, and there are still many bug reports over at the Foundation forums.)

7

@abroess: Could you pls. use 3 backticks for code blocks, 1 backtick is for inline code only. Makes your code much more readable, thanks :slightly_smiling:

1 Like
8

@abroess: Your example does not work for me, alas - I don’t know why.

As the F6 documentation says, you need an anchor to define the point the stickiness relates to. It could be #page in your code, but when I change that in data-options, nothing happens. Also data-options has a margin-top:0 already, so it is not necessary to add it in the style. There are many extras you added, which is wonderful when you need it at some point, thanks for that. For instance it is a good idea to reduce the width of the menu items for big screens so that they don’t appear far to the left and right. But what I want is something as simple as possible, so that it works with the very basics of the F6 documentation.

Anyhow: I am more and more convinced that the bug is rooted somewhere in the F6 framework itself.

In case somebody works with F6 and wants to try it, here is the code for the menu.php:

<div id="stickhere" />
<nav data-sticky-container>
  <div class="sticky" data-sticky data-options="marginTop:0;anchor:stickhere;">
    <div class="top-bar">
      <div class="row column"><!-- menu items contain to grid -->
      <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
          <li><a class="logo" href="<?php echo url() ?>"><img src="<?php echo url('assets/images/logo.svg') ?>" alt="<?php echo $site->title()->html() ?>" /></a></li>
          <li><a class="menu-text" href="<?php echo url() ?>"><?php echo $site->title()->html() ?></a></li>
          <?php foreach($pages->visible() as $p): ?>
            <?php if($p->hasVisibleChildren()) { ?>
            <li class="has-submenu"><a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a>
              <ul class="submenu menu vertical" data-submenu>
                <?php foreach($p->children()->visible() as $p): ?>
                  <li><a href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a></li>
                <?php endforeach; ?>
              </ul>
            </li>
            <?php } else{ ?><li><a<?php e($p->isOpen(), ' class="active"') ?> href="<?php echo $p->url() ?>"><?php echo $p->title()->html() ?></a></li><?php } ?>
          <?php endforeach ?>
        </ul>
      </div>
      <div class="top-bar-right">
        <ul class="menu">
          <li><input type="search" placeholder="Search"></li>
          <li><button type="button" class="button">Search</button></li>
        </ul>
      </div>
      </div>
    </div>
  </div>
</nav>

CSS:

.sticky {
  width: 100%
        }
9

@Kate
Sorry for the confusion about the extra styles. They are based on the Framework Javascript. I saved your test site via browser and modified it. Anyway I looked at your test site again with Chrome, Firefox and Safari and the problem seems to be solved. Right?