Menu icon Foundation

My Posts


My Comments

Katie commented on Katie 's post about 2 years

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.
 

Katie commented on Katie 's post about 2 years

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 commented on Robocop's post about 2 years

Hi Robocop,
Yes, I see that it is working normally in browsers etc.
That was the only thing I could think of, sorry.
It does look very nice though. :)
Katie

Katie commented on Greg Brown's post about 2 years

Another possibility is to get it from jsdelivr, which also have a whole bunch of other JS files.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

There are performance benefits from getting it from a CDN, same with all the other common files, it might mean that someone downloaded the file for a different site and it is already on their device. Saving the time and bandwidth to get it again.

Katie commented on Robocop's post about 2 years

Hi Robocop,
 
Do you have a line like:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This in your template?
That could be the cause of your difficulty.
K

Katie commented on Lars Wegas's post about 2 years

Hi Lars,
I think you want to look at the Grid Frame, which should give you exactly what you seem to be asking for.
http://foundation.zurb.com/sites/docs/xy-grid.html#grid-frame
I hope this helps.
K
 

Katie commented on kendall bernardi's post about 2 years

Hi Kendall,
I am also having the same kind of problems.
I have just started to use the Foundation 6.4.2 with the XY Grid. The conversion of a simple site has been fine, a little tedious, but fine.
The Navigation on the other hand just does not want to work.
The Right hand items do not want to move to the right, they all float left.
The Sticky does not stick.
The responsive sometimes just seems to make the whole top bar vanish on a real phone, but works fine on the desktop at small size.
I have no help, but just some sympathy.
 
K
 

Katie commented on Kerry Smith's post almost 5 years

Hi Kerry,

If I change your list item for the Twitter icon to:

 <li>
        <span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip tip-top radius" title="Follow us on Twitter"><a href="https://twitter.com/webrake" target="_blank" class="twit">xx<i class="fi-social-twitter"></i>xx</a></span>
        </li>

I get four xxxx in a circle. Are you including the icons and their fonts, and CSS. I didn't have any luck styling the icons, they didn't seem to be there.

Katie commented on Steve S's post almost 5 years

<dd><a href="#/views/admin/#panel4">Tab 4</a></dd>

It is not clear to me what you are trying to do here, but to jump to the tab, you need to make that line say:

<dd><a href="#panel4">Tab 4</a></dd>

Since you are jumping to the link on your current page which is called panel4.

If you want to jump to a different page, then I don't think a tab is a good choice, as a Tab is expected to be an element on the current page.

I hope this helps a little.

Katie commented on Ganbaa's post almost 5 years

Are your windows both the same size, because it looks like your IE11 version is using the SMALL version of the site and the Mac version looks like a desktop version.

The switching from one to the other is controlled by the width of the viewport.

IE11 has been working well for me, and I do all my development and testing with IE11.

The other thing to check, is that you haven't used vendor prefixes with your SCSS and omitted the standard versions, which IE11 will use.

It is hard to say any more without access to the site.

Do you have a URL I could try?

Posts Followed


  • 1
    Reply
  • Layout help needed

    By Lars Wegas

    layout6.4xygrid

    Hello, &nbsp; i would like to know, what is the best way to create this layouts with fondation 6.4 xy-grid Desktop: - content (menu and image) is aligned centered vertical - image is aligned centered horizontal - image navigation (title, date, locat... (continued)

    Last Reply by Katie about 2 years ago




Following

    No Content

Followers

My Posts


My Comments

You commented on Katie 's post about 2 years

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.
 

You commented on Katie 's post about 2 years

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.

You commented on Robocop's post about 2 years

Hi Robocop,
Yes, I see that it is working normally in browsers etc.
That was the only thing I could think of, sorry.
It does look very nice though. :)
Katie

You commented on Greg Brown's post about 2 years

Another possibility is to get it from jsdelivr, which also have a whole bunch of other JS files.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css" integrity="sha256-eZrrJcwDc/3uDhsdt61sL2oOBY362qM3lon1gyExkL0=" crossorigin="anonymous" />

There are performance benefits from getting it from a CDN, same with all the other common files, it might mean that someone downloaded the file for a different site and it is already on their device. Saving the time and bandwidth to get it again.

You commented on Robocop's post about 2 years

Hi Robocop,
 
Do you have a line like:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

This in your template?
That could be the cause of your difficulty.
K

You commented on Lars Wegas's post about 2 years

Hi Lars,
I think you want to look at the Grid Frame, which should give you exactly what you seem to be asking for.
http://foundation.zurb.com/sites/docs/xy-grid.html#grid-frame
I hope this helps.
K
 

You commented on kendall bernardi's post about 2 years

Hi Kendall,
I am also having the same kind of problems.
I have just started to use the Foundation 6.4.2 with the XY Grid. The conversion of a simple site has been fine, a little tedious, but fine.
The Navigation on the other hand just does not want to work.
The Right hand items do not want to move to the right, they all float left.
The Sticky does not stick.
The responsive sometimes just seems to make the whole top bar vanish on a real phone, but works fine on the desktop at small size.
I have no help, but just some sympathy.
 
K
 

You commented on Kerry Smith's post almost 5 years

Hi Kerry,

If I change your list item for the Twitter icon to:

 <li>
        <span data-tooltip aria-haspopup="true" data-options="disable_for_touch:true" class="has-tip tip-top radius" title="Follow us on Twitter"><a href="https://twitter.com/webrake" target="_blank" class="twit">xx<i class="fi-social-twitter"></i>xx</a></span>
        </li>

I get four xxxx in a circle. Are you including the icons and their fonts, and CSS. I didn't have any luck styling the icons, they didn't seem to be there.

You commented on Steve S's post almost 5 years

<dd><a href="#/views/admin/#panel4">Tab 4</a></dd>

It is not clear to me what you are trying to do here, but to jump to the tab, you need to make that line say:

<dd><a href="#panel4">Tab 4</a></dd>

Since you are jumping to the link on your current page which is called panel4.

If you want to jump to a different page, then I don't think a tab is a good choice, as a Tab is expected to be an element on the current page.

I hope this helps a little.

You commented on Ganbaa's post almost 5 years

Are your windows both the same size, because it looks like your IE11 version is using the SMALL version of the site and the Mac version looks like a desktop version.

The switching from one to the other is controlled by the width of the viewport.

IE11 has been working well for me, and I do all my development and testing with IE11.

The other thing to check, is that you haven't used vendor prefixes with your SCSS and omitted the standard versions, which IE11 will use.

It is hard to say any more without access to the site.

Do you have a URL I could try?

Posts Followed

Following

  • No Content

Followers