Menu icon Foundation
TopBar - Sticky Upgrade of Existing Site

 Hi All,

First up, this is my 7th go at this post!

I am hoping that someone can point out my problem, issue.

I have a simple (6 page) website, that is being updated from Foundation 6.3.1 to 6.4.2. I understand that there have been quite a few changes, but it shouldn't be all that hard.

The site used the Flex grid, and NOT the Float grid. Moving to XY Grid of course means using a different system and the Float system. That conversion is done and was fairly straightforward.

My problem is with the TopBar and the Sticky part.

The site is using the following JavaScript and they are loaded in this order:

  1. code.jquery.com/jquery-3.2.1.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/what-input/4.3.1/what-input.min.js
  3. cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/js/foundation.min.js

Then there is a call to $(document) [dot not space] foundation(); to start up the Foundation system. 

 There is some php code that holds the structure of the navigation, mostly for easy updating and to colour highlight the page currently visible. There is no problem with the PHP or with the generation of the page navigation.

 This part is common to the old solution and the new (not working solution) 

 

<?php

$navData = array( 1=>
   array(
	   'name' => 'home',
	   'url' => '',
	   'label' => 'Home'
   ),

   array(
	   'name' => 'item1',
	   'url' => 'url1',
	   'label' => 'text1'
   ),

   array(
	   'name' => 'item2',
	   'url' => 'url2',
	   'label' => 'text2'
   ),

   array(
	   'name' => 'item3',
	   'url' => 'url3',
	   'label' => 'text3'
   ),
);

?>

 

Then the old version of the sticky TopBar.

 

<div data-sticky-container id="main-nav">
	<div data-sticky data-margin-top='0' data-top-anchor="header:top" class="top-menu" style="">

		<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle style="float: right; margin-top: 1rem;"></button>
			<div class="title-bar-title">
				<a href="<?php echo base_url('');?>">
					<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
				</a>
			</div>
		</div>

		<div class="top-bar" id="example-menu">
			<div class="top-bar-right">
				<nav>
					<ul class="vertical medium-horizontal menu" data-dropdown-menu>
						<?php
                        foreach($navData as $item)
                        {
                            echo '<li>';
                            echo '<a ';
                            if($page_name != $item['name'])
                            {
                                echo 'class="dark-gray"';
                            }
                            echo 'href="' . base_url($item['url']) . '">' . $item['label'] . '</a>';
                            echo '</li>';
                        }
                        ?>
					</ul>
				</nav>
			</div>

			<div class="top-bar-left">
				<ul class="menu">
					<li class="menu-text hide-for-small-only" style="padding-left:0; padding-right:0;">
						<a href="<?php echo base_url('');?>">
							<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
						</a>
					</li>
				</ul>
			</div>
		</div>

	</div>
</div>

 

This has been working fine for some time and I have had no problems with the code above.

This is what I managed to get working, but it is a dogs breakfast and I really hate it.

 

<div data-sticky-container id="main-nav">
	<div data-sticky data-margin-top='0' data-top-anchor="header:top" class="top-menu" style="">

		<div class="grid-container full">
			<div class="grid-x">
				<div class="cell auto">
					<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
						<div class=" cell">
							<div class="grid-x">
								<div class="small-6 cell">
									<div class="title-bar-title ">
										<a href="<?php echo base_url('');?>">
											<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
										</a>
									</div>
								</div>

								<div class="auto cell">
									<button class="menu-icon align-right" type="button" data-toggle="example-menu" style="float: right; margin-top: 1rem;"></button>
								</div>
							</div>
						</div>
					</div>

					<div class="top-bar small-12 cell" id="example-menu">
						<div class="top-bar-left">
							<ul class="menu">
								<li class="menu-text hide-for-small-only" style="padding-left:0; padding-right:0;">
									<a href="<?php echo base_url('');?>">
										<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
									</a>
								</li>
							</ul>
						</div>

						<div class="top-bar-right align-right">
							<nav>
								<ul class="vertical medium-horizontal menu" data-dropdown-menu>
									<?php
									foreach($navData as $item)
									{
										echo '<li>';
										echo '<a ';
										if($page_name != $item['name'])
										{
											echo 'class="dark-gray" ';
										}
										echo 'href="' . base_url($item['url']) . '">' . $item['label'] . '</a>';
										echo '</li>';
									}
                                    ?>
								</ul>
							</nav>
						</div>

					</div>

				</div>
			</div>
		</div>

	</div>
</div>

 

You will see that I have Grid-x all over the place and it is a mess. 

This works basically on the desktop and the navigation will show up, but when run on a mobile device, it will fail to either display the topbar at all, sometimes, or the navigation might not pop down, or it might scroll with the content. I have tried it on Windows 10 Mobile edge and Android.

I think part of the complication is that I want the website name on the left and the hamburger button on the right. The new system doesn't seem to want to do left for the left part and right for the right. it seems to want to place them next to each other rather than on opposite sides of the screen.

I would be very grateful if anyone could point me in the correct direction.

K

topbarsticky6.4.2

 Hi All,

First up, this is my 7th go at this post!

I am hoping that someone can point out my problem, issue.

I have a simple (6 page) website, that is being updated from Foundation 6.3.1 to 6.4.2. I understand that there have been quite a few changes, but it shouldn't be all that hard.

The site used the Flex grid, and NOT the Float grid. Moving to XY Grid of course means using a different system and the Float system. That conversion is done and was fairly straightforward.

My problem is with the TopBar and the Sticky part.

The site is using the following JavaScript and they are loaded in this order:

  1. code.jquery.com/jquery-3.2.1.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/what-input/4.3.1/what-input.min.js
  3. cdnjs.cloudflare.com/ajax/libs/foundation/6.4.2/js/foundation.min.js

Then there is a call to $(document) [dot not space] foundation(); to start up the Foundation system. 

 There is some php code that holds the structure of the navigation, mostly for easy updating and to colour highlight the page currently visible. There is no problem with the PHP or with the generation of the page navigation.

 This part is common to the old solution and the new (not working solution) 

 

<?php

$navData = array( 1=>
   array(
	   'name' => 'home',
	   'url' => '',
	   'label' => 'Home'
   ),

   array(
	   'name' => 'item1',
	   'url' => 'url1',
	   'label' => 'text1'
   ),

   array(
	   'name' => 'item2',
	   'url' => 'url2',
	   'label' => 'text2'
   ),

   array(
	   'name' => 'item3',
	   'url' => 'url3',
	   'label' => 'text3'
   ),
);

?>

 

Then the old version of the sticky TopBar.

 

<div data-sticky-container id="main-nav">
	<div data-sticky data-margin-top='0' data-top-anchor="header:top" class="top-menu" style="">

		<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
			<button class="menu-icon" type="button" data-toggle style="float: right; margin-top: 1rem;"></button>
			<div class="title-bar-title">
				<a href="<?php echo base_url('');?>">
					<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
				</a>
			</div>
		</div>

		<div class="top-bar" id="example-menu">
			<div class="top-bar-right">
				<nav>
					<ul class="vertical medium-horizontal menu" data-dropdown-menu>
						<?php
                        foreach($navData as $item)
                        {
                            echo '<li>';
                            echo '<a ';
                            if($page_name != $item['name'])
                            {
                                echo 'class="dark-gray"';
                            }
                            echo 'href="' . base_url($item['url']) . '">' . $item['label'] . '</a>';
                            echo '</li>';
                        }
                        ?>
					</ul>
				</nav>
			</div>

			<div class="top-bar-left">
				<ul class="menu">
					<li class="menu-text hide-for-small-only" style="padding-left:0; padding-right:0;">
						<a href="<?php echo base_url('');?>">
							<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
						</a>
					</li>
				</ul>
			</div>
		</div>

	</div>
</div>

 

This has been working fine for some time and I have had no problems with the code above.

This is what I managed to get working, but it is a dogs breakfast and I really hate it.

 

<div data-sticky-container id="main-nav">
	<div data-sticky data-margin-top='0' data-top-anchor="header:top" class="top-menu" style="">

		<div class="grid-container full">
			<div class="grid-x">
				<div class="cell auto">
					<div class="title-bar" data-responsive-toggle="example-menu" data-hide-for="medium">
						<div class=" cell">
							<div class="grid-x">
								<div class="small-6 cell">
									<div class="title-bar-title ">
										<a href="<?php echo base_url('');?>">
											<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
										</a>
									</div>
								</div>

								<div class="auto cell">
									<button class="menu-icon align-right" type="button" data-toggle="example-menu" style="float: right; margin-top: 1rem;"></button>
								</div>
							</div>
						</div>
					</div>

					<div class="top-bar small-12 cell" id="example-menu">
						<div class="top-bar-left">
							<ul class="menu">
								<li class="menu-text hide-for-small-only" style="padding-left:0; padding-right:0;">
									<a href="<?php echo base_url('');?>">
										<img src="<?php echo base_url('inc/img/logo.png');?>" alt="Logo" height="45" width="181" />
									</a>
								</li>
							</ul>
						</div>

						<div class="top-bar-right align-right">
							<nav>
								<ul class="vertical medium-horizontal menu" data-dropdown-menu>
									<?php
									foreach($navData as $item)
									{
										echo '<li>';
										echo '<a ';
										if($page_name != $item['name'])
										{
											echo 'class="dark-gray" ';
										}
										echo 'href="' . base_url($item['url']) . '">' . $item['label'] . '</a>';
										echo '</li>';
									}
                                    ?>
								</ul>
							</nav>
						</div>

					</div>

				</div>
			</div>
		</div>

	</div>
</div>

 

You will see that I have Grid-x all over the place and it is a mess. 

This works basically on the desktop and the navigation will show up, but when run on a mobile device, it will fail to either display the topbar at all, sometimes, or the navigation might not pop down, or it might scroll with the content. I have tried it on Windows 10 Mobile edge and Android.

I think part of the complication is that I want the website name on the left and the hamburger button on the right. The new system doesn't seem to want to do left for the left part and right for the right. it seems to want to place them next to each other rather than on opposite sides of the screen.

I would be very grateful if anyone could point me in the correct direction.

K

Rafi Benkual about 2 years ago

Looks like you have .top-bar-left after .top-bar-right so they will be in the wrong sides.

I changed the anchor to be at the bottom of header and it works: https://codepen.io/rafibomb/pen/PKEzjm?editors=1000

Katie about 2 years ago

Hi Rafi,

 

I have just got back from work related travel and will look at this either today or tomorrow, but it looks very promising in CodePen.

Katie about 2 years ago

Hi Rafi,

I have moved my left above right, so that is now correct, from an order perspective. However, there is still no moving to the right on mobile (or small).

I have tried your CodePen and tried my own code and I cannot make the sticky work with Mobile (or small).

It seems to be OK with Medium and up, but the small will not stick.

I have also tried moving to 6.4.3, but that doesn't help either.

I have tried this with Edge, IE 11 and Firefox 54.

Thanks for your help so far.

 

Yayla Kaplan over 1 year ago

Hi Katie,

You might already solve this but if you have not this works. 

 

Add a "sticky" class on your HTML ; 

  <div class="sticky" data-sticky-container id="main-nav">

 

And add this to your CSS;

.sticky {

  position: fixed;

  top: 0;

  width: 100%;

  padding-bottom: 5px;

}

 

Yayla

 

 

seedharaman over 1 year ago

nice post which explain sticky upgrade of excisting system .I am a health specialist.To be specific I am a trainer to get rid of weight.weight loss Tips News

Timothy over 1 year ago

Great to see you found a solution to your coding problem Katie!

 

ProGardenTips