Responsive CSS menu not working for me?

As always, thanks again.

Duh, forgetting the hash! It must have been late!

The Sticker action worked OK except for one thing, and that is it only starts working correctly after the first click. Look at the site to see what I mean.

On mobile devices, there is an annoying jumping whenever ‘top’ is selected. Goes to top OK, then screen jumps up and the menu covers part of the graphic. Don’t know it it’s me, or something weird about the action in FW7.

Any thoughts on 1) 2) or 3) above? If not, I’ll contact Softpress support.

Thanks again.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

The Sticker action worked OK except for one thing, and that is it only starts working correctly after the first click. Look at the site to see what I mean.

Working for me.

there is an annoying jumping whenever ‘top’ is selected

See it but cant say that it is a real issue for me. Have you actually set an Anchor for #Top?

  1. I have the responsive CSS menu set to go to the ‘burger’…

Cant explain that but a Burger at 480 on iPhone landscape is no big deal. Small percentage of your visitors I would have thought.

  1. the positioning of the Exhibeo gallery.

Dont have Exhibeo to test that.

  1. the ‘eye’ image at the end of ‘Welcome’ loses it’s drop shadow in landscape iPad and iPhone 6

Again I see it but I also dont see the equivalent -webkit-box-shadow declarations. You have:

#graphicdesignimagecropped.f-ms { width:100%; box-shadow:4px 4px 4px rgba(30,30,30,0.51); overflow:hidden }

What about the others

  -moz-box-shadow: 4px 4px 4px rgba(30,30,30,0.51);
  -webkit-box-shadow: 4px 4px 4px rgba(30,30,30,0.51);

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I also dont see the equivalent -webkit-box-shadow declarations.

Guess I am not up to date with this and Safari hasn’t required a vendor prefix for quite a few versions.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Working for me.

Hmmm, I’ve tried Safari and Chrome on OS X and Chrome and IE on windows and all show the same behaviour, i.e. first click/tap goes to wrong place and overshoots anchor point. After that it works OK. You have to refresh the page to see this happening, otherwise it looks OK.

See it but cant say that it is a real issue for me. Have you actually set an Anchor for #Top?

Yes, I have an anchor for Top. It even happens on your test site http://deltadesign.co/FW7Test/fixedheader.html. Just drag the screen down from the top and you’ll see the jump. On mobile devices this doesn’t look good.

Cant explain that but a Burger at 480 on iPhone landscape is no big deal. Small percentage of your visitors I would have thought.

Agreed.

Again I see it but I also dont see the equivalent -webkit-box-shadow declarations. You have:

#graphicdesignimagecropped.f-ms { width:100%; box-shadow:4px 4px 4px rgba(30,30,30,0.51); overflow:hidden }

What about the others

  -moz-box-shadow: 4px 4px 4px rgba(30,30,30,0.51);
  -webkit-box-shadow: 4px 4px 4px rgba(30,30,30,0.51);

Don’t understand any of that! All I know is that I can’t see why it would lose the drop shadow in Landscape iPhone and iPad. It’s not a breakpoint thing as it is OK in iPad portrait which is wider than iPhone landscapes.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Don’t understand any of that! All I know is that I can’t see why it would lose the drop shadow in Landscape iPhone and iPad. It’s not a breakpoint thing as it is OK in iPad portrait which is wider than iPhone landscapes.

Looking into this a bit more, I reckon it’s a bug, as all the sites I’ve done recently are displaying the same issue, i.e. iOS devices lose drop shadow on images in landscape.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

It looks like an iOS bug.

Add a one pixel border radius to force the browser to render the shadow in landscape mode and while zooming.

border-radius: 1px;

So on your page try adding

#graphicdesignimagecropped { border-radius: 1px; }

Add it inside the style tags you added to control the menu text as the last thing before the closing

And let us know what happens

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dave, as usual you cracked it. Well done.

My only question is, will FW not overwrite this on the next change? Or, can it be implemented in FW?

Did you have any comments to make on my post of 3 Nov 1:52pm?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

will FW not overwrite this on the next change? Or, can it be implemented in FW?

Not if you have added it in FW in Page>Html markup. FW respects anything you have added there. I assume that is where you added the media query.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Did you have any comments to make on my post of 3 Nov 1:52pm?

On what specifically?

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Not if you have added it in FW in Page>Html markup. FW respects anything you have added there. I assume that is where you added the media query.

D

No, I added it in from Dreamweaver. Couldn’t see how to place it using FW. The Page>Markup only gives headers as far as I could see.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On what specifically?

Just the malfunctioning Sticker action.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On 4 Nov 2014, 8:12 pm, Iain Mackenzie wrote:

Not if you have added it in FW in Page>Html markup. FW respects anything you have added there. I assume that is where you added the media query.

D

No, I added it in from Dreamweaver. Couldn’t see how to place it using FW. The Page>Markup only gives headers as far as I could see.

As it happens, in this case, the new bit of code was just below the other code you added, so I was able to just paste it below that. Is there a way of seeing the whole page html in FW?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

No, I added it in from Dreamweaver.

Dont do that. Use Page>Html Markup and put style code in the before section.

Is there a way of seeing the whole page html

I presume trhat you have a Text editor like Text Wrangler (if not download it) then you can set up TW the same way as you add a Browser for previewing.

Then it is just a case of Previewing in the Browser but the browser will be TW.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BTW - there are 3 items on your page that have a higher z-index than your menu (Exhibeo, contact form and the google map) - which means that they obscure your Navigation on scroll rather than sliding up behind it.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

BTW - there are 3 items on your page that have a higher z-index than your menu (Exhibeo, contact form and the google map) - which means that they obscure your Navigation on scroll rather than sliding up behind it.

Don’t know what a z-index is, but I’m guessing it’s some kind of stacking priority. That is very interesting, as the one other quirky thing I noticed was in some browsers the Gallery was on top of the menu.

Now, the questions are, how did this happen and how do I fix it in FW? All I did was insert the actions in the normal way in FW. Nothing different to any other item/action.

Regarding the malfunctioning Sticker action, is that something I should put to Softpress?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Regarding the malfunctioning Sticker action, is that something I should put to Softpress?

Sticker is not a SP action - rather it is one of Walter’s. It works fine for me on my devices.

Don’t know what a z-index is, but I’m guessing it’s some kind of stacking priority.

Indeed it is, the higher the z-index the higher up the stacking order.

Try the following - and make sure you do it in Page>Html Markup in the before section (where your other additions should be)

#navbar1 {
z-index: 9999;
}

Making sure it is within style tags.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sticker is not a SP action - rather it is one of Walter’s. It works fine for me on my devices.

Dave, are you sure it’s working for you? I have tried on 2 or 3 browsers on OS X and Windows, as well as 5 or 6 iOS devices and the problem is there on every one.

In every case, ONLY IF you are at the top of the page from a refresh, i.e. if you were coming to the site fresh, the first tap overshoots whatever anchor point is selected. After that first tap/click, it’s OK.

Also, there is an annoying jump at the top. If you pull down in Safari on my site or the test you did WHEN at the top, you’ll see what I mean.

Indeed it is, the higher the z-index the higher up the stacking order.

Try the following - and make sure you do it in Page>Html Markup in the before section (where your other additions should be)

#navbar1 {
z-index: 9999;
}

Making sure it is within style tags.

Doesn’t seem to work, in fact what was a rare problem, i.e. the Gallery appearing on top of the menu, has become reproducible on all devices. Easiest way to see the issue is to select Portfolio and Contact back and fore and you can see the gallery on top.

There is always the possibility that I have put the code in wrongly!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Stick an !important in there ie

#navbar1 {
z-index: 9999 !important;
}

IF you are at the top of the page from a refresh, i.e. if you were coming to the site fresh, the first tap overshoots whatever anchor point is selected.

What have you set as the top offset?

I see the issue but coming to your site as a newcomer I can’t say that it would bother me. I might increase the offset so that initial click clears the navbar but really it is no big deal.

Drop Walter a line - he might have a solution if it is going to be a problem for you. It may be that it has not been revised for 7.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Dave, yep, the !important resolved the issue. Thanks again.

Re the action, I don’t think I’m explaining myself very well. It’s not the first click to get on the site, it’s the first click/tap after getting on there where it goes wrong.

The offset is ‘0’ as anything else moves the menu down the page. However, setting the offset to some other value sees the same effect, so I guess that is not the answer.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I think I can see what’s happening. When one first goes on to the site, you can see a reasonable gap between the top nav bar and the logo. The first click of the menu overshoots the anchor.

However, if you go to the site (as a refresh or new), then drag the screen down, you’ll see the jump I’ve mentioned, and that brings the logo a lot closer to the menu. Then, clicking/tapping on the menu works as it should.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options