Menu icon Foundation

Designer | Ashford, Kent

My Posts


My Comments

Darrell MacLennan commented on Sophia Jones's post almost 2 years

Well, that's completely useless information relating to Zurb Foundation.FYI - I had to fix an entire business network running your software, a few years back, that had so much malware zooting through their systems that I wondered why they even bothered running your AV if that is how bad it was!I hope you get lots of business from this post. :P

Darrell MacLennan commented on JD Fillmore's post about 3 years

I have looked at the example from the F5 documentation, and your code...On the div containing your top bar (leave out contain-to-grid [for now]):
<div class="sticky">
...
</div>
Try this on the navigation element:
<nav class="top-bar" data-topbar="" role="navigation" data-options="sticky_on: all">
 

Darrell MacLennan commented on Duncan Baird's post over 5 years

Hi, I had the same problem. The dropdown shows on top of the orbit slider on page load, before the next image in the slider loads, then goes behind the the slider as soon as the next image changes.

I changed the z-index on the topbar element.

.top-bar {
z-index: 99 ;
}

This works.

Darrell MacLennan commented on Jade's post over 5 years

I get 6 images in a row using that code.

Use "text-center" as the class for your tag, then you can remove "text-align" from your CSS.

Darrell MacLennan commented on Marc McGee's post almost 6 years

You have your main row, with the large-x divs dividing sections, then align those with text-center, or left or right.

i.e. Headling, class="text-left"
Image, class="text-center"
Text, class="text-left

with each of those in their own DIV

To use a wider image, or smaller one for faster loading times, you use data-interchange, so you will load a larger image for larger screens, and a smaller image for smaller screens.

Foundation has named queries in the template so you just reference those: http://foundation.zurb.com/docs/components/interchange.html

Posts Followed


  • 14
    Replies
  • Sticky not working! (F5)

    By JD Fillmore

    stickyhtmlcss

    Hey all, So I've applied a sticky to the navigation bar on my site here:&nbsp;https://goo.gl/usRvGL You'll notice a top bar (with a phone icon and free quote button), however I placed the sticky div that wraps around the main navigation, on the main nav... (continued)

    Last Reply by henry1992 about 3 years ago


Following

    No Content

Followers

My Posts

My Comments

You commented on Sophia Jones's post almost 2 years

Well, that's completely useless information relating to Zurb Foundation.FYI - I had to fix an entire business network running your software, a few years back, that had so much malware zooting through their systems that I wondered why they even bothered running your AV if that is how bad it was!I hope you get lots of business from this post. :P

You commented on JD Fillmore's post about 3 years

I have looked at the example from the F5 documentation, and your code...On the div containing your top bar (leave out contain-to-grid [for now]):
<div class="sticky">
...
</div>
Try this on the navigation element:
<nav class="top-bar" data-topbar="" role="navigation" data-options="sticky_on: all">
 

You commented on Duncan Baird's post over 5 years

Hi, I had the same problem. The dropdown shows on top of the orbit slider on page load, before the next image in the slider loads, then goes behind the the slider as soon as the next image changes.

I changed the z-index on the topbar element.

.top-bar {
z-index: 99 ;
}

This works.

You commented on Jade's post over 5 years

I get 6 images in a row using that code.

Use "text-center" as the class for your tag, then you can remove "text-align" from your CSS.

You commented on Marc McGee's post almost 6 years

You have your main row, with the large-x divs dividing sections, then align those with text-center, or left or right.

i.e. Headling, class="text-left"
Image, class="text-center"
Text, class="text-left

with each of those in their own DIV

To use a wider image, or smaller one for faster loading times, you use data-interchange, so you will load a larger image for larger screens, and a smaller image for smaller screens.

Foundation has named queries in the template so you just reference those: http://foundation.zurb.com/docs/components/interchange.html

Posts Followed

Following

  • No Content

Followers

  • No Content