Menu icon Foundation

My Posts




My Comments

Rob Lampard commented on Rob Lampard's post about 3 years

Cheers Rafi, also had a reply on twitter so thanks! Panels work fine :) 

Rob Lampard commented on Hex dec's post over 3 years

Google doesn't take into account class names for SEO. The thing that matters is your semantic code structure.

http://www.quora.com/Are-the-names-of-the-HTML-tag-classes-counted-in-SEO

Rob Lampard commented on Isak Kadyroff's post over 3 years

You can just style the classes as "small-12 medium-6 columns" and it should achieve the effect for you.

Use media queries to change the styles for small breakpoint if you need too.

Rob Lampard commented on Patrick Dierig's post almost 4 years

Add the following and it should be sorted! You can also add text-align:center; to center it :)

.navigation {margin:0;padding:0 1.1rem;}


Rob Lampard commented on Patrick Dierig's post almost 4 years

Remove the row and columns classes from your sticky nav and add width:100%; to it rather than max-width:77.5rem;

You also need to make sure your nav isn't wrapped inside a row.

Rob Lampard commented on Douglas Rider's post almost 4 years

Managed to replicate it in a codepen but I'm sure there's a better way to do it!

http://codepen.io/anon/pen/LVwxqO

Rob Lampard commented on Douglas Rider's post almost 4 years

Slick actually does support this - it's called "Slider Syncing" - http://kenwheeler.github.io/slick/

I changed your HTML a bit, it should work...

<div class="fade show-for-medium-up">
  <div>
      <div class="row">
        <div class="medium-9 column">
          <div><img src="img/placeholders/MAplaceholders.jpg" width="100%" alt="" /></div>
        </div>
        <div class="medium-3 column">
          <div class="row">
          <div class="small-12 column">
            <center>
            <h3>SHiFT</center></div>
          </div>
          <div class="row">
            <div class="large-12 medium-12 small-9 column"><p>SHiFT is an interactive iOS application that strives to inspire academic, business and community leaders to contribute time, energy and money to overcome the social problems that our community faces. With their support, we are redefining the way information is presented and distributed in the age of the Internet.</p></div>
            <div class="large-6 medium-12 small-3 column"><a href="#DP1main"><img src="img/placeholders/icon.png" alt=""/></a></div>
          </div>
        </div>
      </div> 
  </div>
  <div>
    <div class="row">
      <div class="medium-9 column">
          <div><img src="img/placeholders/MAplaceholders.jpg" width="100%" alt=""/></div>
      </div>
      <div class="medium-3 column">
        <div class="row">
          <div class="small-12 column"><center><h3>Slide 2</center></div>
        </div>
        <div class="row">
          <div class="large-12 medium-12 small-9 column"><p>Text for slide 2</p></div>
          <div class="large-6 medium-12 small-3 column"><a href="#DP1main"><img src="img/placeholders/icon.png" alt=""/></a></div>
        </div>
      </div>
    </div> 
  </div>
</div>


<!-- Thumb Slide -->

<div class="slider-nav">
        <div>
      <img src="img/placeholders/icon.png" width="100px" alt=""/>
    </div>
        <div>
      <img src="img/placeholders/icon.png" width="100px" alt=""/>
    </div>
</div>

$('.fade').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.fade',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Rob Lampard commented on Jonas Marlo Loerken's post almost 4 years

If you want the Top-Bar to always appear at the top on mobile just add the tag below around what you currently have in a duplicate menu

<div class="fixed show-for-small">

I'm not sure there's an easier way other than duplicating the nav in the two different sticky/fixed wrappers for different screen sizes..

Rob Lampard commented on Dan Crowe's post almost 4 years

You have a console error saying Foundation is not defined which is probably causing some issues. Make sure you're calling in foundation.js before the other scripts

Rob Lampard commented on Mark 's post almost 4 years

The example uses custom (i think) padding on the nested divs inside the tags, or you can just nest your content inside a row and columns as you want which will inherit padding values..

If you've copied the docs code word for word you can just add this to your CSS;

.example-orbit-content li div {
    color: white;
    background: #2ba6cb;
    padding: 30px 40px;
}

Posts Followed

  • 11
    Replies
  • HTML to Text ratio SEO

    By Hex dec

    seo

    As I am writing some foundation classes, I'm realizing how much HTML there is compare to my text, the classes are slowly becoming huge, not only is it getting pretty hectic to read and follow, but it's terrible for SEO. What is the best way to go about s... (continued)

    Last Reply by benh tri ngoai 8 months ago




  • 2
    Replies
  • Side buttons for an orbit

    By Douglas Rider

    I am doing a photo gallery where I want to put 8 thumbnails on the left side of the picture. I want to set up the picture 2 thumbnails wide and 4 thumbnails tall. I looked into Slick but there are no options that I can see that will allow the thumbnails t... (continued)

    Last Reply by Rafi Benkual almost 4 years ago





  • 2
    Replies
  • Orbit slider without images style issue

    By Mark

    Hi there, I am having a problem with Orbit sider. I want to use it just with content and no images. If i do that i am having styling issues. Text is not properly aligned in some way. I am using code exactly like the example on the Orbit Foundation page... (continued)

    Last Reply by Mark almost 4 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Rob Lampard's post about 3 years

Cheers Rafi, also had a reply on twitter so thanks! Panels work fine :) 

You commented on Hex dec's post over 3 years

Google doesn't take into account class names for SEO. The thing that matters is your semantic code structure.

http://www.quora.com/Are-the-names-of-the-HTML-tag-classes-counted-in-SEO

You commented on Isak Kadyroff's post over 3 years

You can just style the classes as "small-12 medium-6 columns" and it should achieve the effect for you.

Use media queries to change the styles for small breakpoint if you need too.

You commented on Patrick Dierig's post almost 4 years

Add the following and it should be sorted! You can also add text-align:center; to center it :)

.navigation {margin:0;padding:0 1.1rem;}


You commented on Patrick Dierig's post almost 4 years

Remove the row and columns classes from your sticky nav and add width:100%; to it rather than max-width:77.5rem;

You also need to make sure your nav isn't wrapped inside a row.

You commented on Douglas Rider's post almost 4 years

Managed to replicate it in a codepen but I'm sure there's a better way to do it!

http://codepen.io/anon/pen/LVwxqO

You commented on Douglas Rider's post almost 4 years

Slick actually does support this - it's called "Slider Syncing" - http://kenwheeler.github.io/slick/

I changed your HTML a bit, it should work...

<div class="fade show-for-medium-up">
  <div>
      <div class="row">
        <div class="medium-9 column">
          <div><img src="img/placeholders/MAplaceholders.jpg" width="100%" alt="" /></div>
        </div>
        <div class="medium-3 column">
          <div class="row">
          <div class="small-12 column">
            <center>
            <h3>SHiFT</center></div>
          </div>
          <div class="row">
            <div class="large-12 medium-12 small-9 column"><p>SHiFT is an interactive iOS application that strives to inspire academic, business and community leaders to contribute time, energy and money to overcome the social problems that our community faces. With their support, we are redefining the way information is presented and distributed in the age of the Internet.</p></div>
            <div class="large-6 medium-12 small-3 column"><a href="#DP1main"><img src="img/placeholders/icon.png" alt=""/></a></div>
          </div>
        </div>
      </div> 
  </div>
  <div>
    <div class="row">
      <div class="medium-9 column">
          <div><img src="img/placeholders/MAplaceholders.jpg" width="100%" alt=""/></div>
      </div>
      <div class="medium-3 column">
        <div class="row">
          <div class="small-12 column"><center><h3>Slide 2</center></div>
        </div>
        <div class="row">
          <div class="large-12 medium-12 small-9 column"><p>Text for slide 2</p></div>
          <div class="large-6 medium-12 small-3 column"><a href="#DP1main"><img src="img/placeholders/icon.png" alt=""/></a></div>
        </div>
      </div>
    </div> 
  </div>
</div>


<!-- Thumb Slide -->

<div class="slider-nav">
        <div>
      <img src="img/placeholders/icon.png" width="100px" alt=""/>
    </div>
        <div>
      <img src="img/placeholders/icon.png" width="100px" alt=""/>
    </div>
</div>

$('.fade').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.fade',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

You commented on Jonas Marlo Loerken's post almost 4 years

If you want the Top-Bar to always appear at the top on mobile just add the tag below around what you currently have in a duplicate menu

<div class="fixed show-for-small">

I'm not sure there's an easier way other than duplicating the nav in the two different sticky/fixed wrappers for different screen sizes..

You commented on Dan Crowe's post almost 4 years

You have a console error saying Foundation is not defined which is probably causing some issues. Make sure you're calling in foundation.js before the other scripts

You commented on Mark 's post almost 4 years

The example uses custom (i think) padding on the nested divs inside the tags, or you can just nest your content inside a row and columns as you want which will inherit padding values..

If you've copied the docs code word for word you can just add this to your CSS;

.example-orbit-content li div {
    color: white;
    background: #2ba6cb;
    padding: 30px 40px;
}

Posts Followed







Following

  • No Content

Followers

  • No Content