Menu icon Foundation

My Posts






My Comments

Martin Kearn commented on Joost Meurs's post about 5 years

+1 on this. I had several orbit sliders working on v5.0.3 and i upgraded to 5.1.1 by simply dropping the new JS and CSS files into my project (no other changes) and now my orbit sliders are not working.

My sliders rotate around 4 images and none of the images are shown even though i can see they are loaded in the HTML source.

Going to have to revert to 5.0.3

Martin Kearn commented on Albert's post over 5 years

As others have suggested, the only way I was able to get the effect working was to not use Foundation top bar and use my own instead. However it I think it is working OK, the only problem I've not resolved yet is that the top bar is not fixed when the off canvas menu is expanded.
```HTML

          <!-- Off Canvas Menu -->
          <aside class="right-off-canvas-menu">
              <!-- whatever you want goes here -->
              <ul>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
              </ul>
          </aside>

          <!-- main content goes here -->
          <div style="width:100%; height: 50px; background-color: yellow;" class="fixed" >
                  <span>This is my fixed top nav bar </span>
                  <a class="right-off-canvas-toggle right">Show Menu</a>
          </div>


          <div class="row" style="margin-top: 50px;">
            <div class="small-12 columns" >
                <h1>Main page</h1>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
            </div>
          </div>

          <!-- close the off-canvas menu -->
          <a class="exit-off-canvas"></a>

      </div>
  </div>

Martin Kearn commented on Martin Kearn's post over 5 years

Hi Nick, what you have described is what I am seeing, but you did a much better job of explaining it than i did! It is good to know i am not the only one seeing this issue.

Hi Rafi, what you described is how i understand interchange is supposed to work, however it is not working in this way for me or Nick by the looks of it.

This seems like a bug with interchange to me. Is there anyone from Zurb watching this thread and able to comment?

Martin Kearn commented on Asif's post over 5 years

The other big advantage to interchange is that it only makes a single http request rather than one for each image which media queries would do. This makes your site lighter and faster.

+1 on this feature request! :)

Martin Kearn commented on Martin Kearn's post over 5 years

Hi Brandon,

That is interesting - the image does seem to be scaling down, however the row that contains the image is not scaling.

In your example, the first cell of the first row with the 'red polka dot' bib image is still almost twice the height of the rest of the row. You can see this because the first row has a white background and the second has a slight gradient.

So in your case you are seeing slightly different result but still not the correct outcome.

What browser are you using?

PS: Thanks for your help

Martin Kearn commented on Martin Kearn's post over 5 years

Thanks Brandon it is good to now I'm not missing something obvious

Martin Kearn commented on Ben W's post over 5 years

Hi,

Thanks for this - just a little more detail for anyone reading this from the future. In order to change the colour of the menu icon bars to #666666, i used the code below in my CSS:
CSS
a.menu-icon span {
-webkit-box-shadow: 0 10px 0 1px #666666, 0 16px 0 1px #666666, 0 22px 0 1px #666666;
box-shadow: 0px 10px 0px 1px #666666, 0px 16px 0px 1px #666666, 0px 22px 0px 1px #666666;
}

Martin Kearn commented on Martin Kearn's post over 5 years

Hi Karl,

Yes that is what i thought should happen (i.e. default applies if nothing is defined), but it is not working that way.

Having looked into it a bit more, i think it is only an issue when the page first loads (if the screen is bigger than M). If you scale the browser down to S and back up again, it work just fine. Could this be a JavaScript issue?

I'm taking a slightly different approach now for S and M and I'm using an off canvas menu and hiding my entire top bar so the issue cannot be seen (I do not have a link). However, I'm still interested in the answer from a theoretical point of view.

I guess it is good to know that the default should apply and it is not something I'm doing wrong in my syntax.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Joost Meurs's post about 5 years

+1 on this. I had several orbit sliders working on v5.0.3 and i upgraded to 5.1.1 by simply dropping the new JS and CSS files into my project (no other changes) and now my orbit sliders are not working.

My sliders rotate around 4 images and none of the images are shown even though i can see they are loaded in the HTML source.

Going to have to revert to 5.0.3

You commented on Albert's post over 5 years

As others have suggested, the only way I was able to get the effect working was to not use Foundation top bar and use my own instead. However it I think it is working OK, the only problem I've not resolved yet is that the top bar is not fixed when the off canvas menu is expanded.
```HTML

          <!-- Off Canvas Menu -->
          <aside class="right-off-canvas-menu">
              <!-- whatever you want goes here -->
              <ul>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
              </ul>
          </aside>

          <!-- main content goes here -->
          <div style="width:100%; height: 50px; background-color: yellow;" class="fixed" >
                  <span>This is my fixed top nav bar </span>
                  <a class="right-off-canvas-toggle right">Show Menu</a>
          </div>


          <div class="row" style="margin-top: 50px;">
            <div class="small-12 columns" >
                <h1>Main page</h1>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
            </div>
          </div>

          <!-- close the off-canvas menu -->
          <a class="exit-off-canvas"></a>

      </div>
  </div>

You commented on Martin Kearn's post over 5 years

Hi Nick, what you have described is what I am seeing, but you did a much better job of explaining it than i did! It is good to know i am not the only one seeing this issue.

Hi Rafi, what you described is how i understand interchange is supposed to work, however it is not working in this way for me or Nick by the looks of it.

This seems like a bug with interchange to me. Is there anyone from Zurb watching this thread and able to comment?

You commented on Asif's post over 5 years

The other big advantage to interchange is that it only makes a single http request rather than one for each image which media queries would do. This makes your site lighter and faster.

+1 on this feature request! :)

You commented on Martin Kearn's post over 5 years

Hi Brandon,

That is interesting - the image does seem to be scaling down, however the row that contains the image is not scaling.

In your example, the first cell of the first row with the 'red polka dot' bib image is still almost twice the height of the rest of the row. You can see this because the first row has a white background and the second has a slight gradient.

So in your case you are seeing slightly different result but still not the correct outcome.

What browser are you using?

PS: Thanks for your help

You commented on Martin Kearn's post over 5 years

Thanks Brandon it is good to now I'm not missing something obvious

You commented on Ben W's post over 5 years

Hi,

Thanks for this - just a little more detail for anyone reading this from the future. In order to change the colour of the menu icon bars to #666666, i used the code below in my CSS:
CSS
a.menu-icon span {
-webkit-box-shadow: 0 10px 0 1px #666666, 0 16px 0 1px #666666, 0 22px 0 1px #666666;
box-shadow: 0px 10px 0px 1px #666666, 0px 16px 0px 1px #666666, 0px 22px 0px 1px #666666;
}

You commented on Martin Kearn's post over 5 years

Hi Karl,

Yes that is what i thought should happen (i.e. default applies if nothing is defined), but it is not working that way.

Having looked into it a bit more, i think it is only an issue when the page first loads (if the screen is bigger than M). If you scale the browser down to S and back up again, it work just fine. Could this be a JavaScript issue?

I'm taking a slightly different approach now for S and M and I'm using an off canvas menu and hiding my entire top bar so the issue cannot be seen (I do not have a link). However, I'm still interested in the answer from a theoretical point of view.

I guess it is good to know that the default should apply and it is not something I'm doing wrong in my syntax.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content