Responsive CSS menu not working for me?

Can someone please look at www.eyemack.co.uk and suggest why I can’t get the CSS menu to respond to width changes, or change to the icon format at iPhone 6 Portrait width?

The menu does change to the ‘burger’ icon at the correct width, but just doesn’t bring up the pop up menu.

Because of the SmoothScroll nature of the site, I need the nav bar to remain in position at the top of the screen and have made the navbar container a layer, in an otherwise in-flow design.

Any help appreciated!


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

I dont have an iPhone 6 but I do have a resizer set for 6 portrait and it works in that

David


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

Thanks Dave, but what I meant was iPhone 6 and smaller. Not sure how you are getting it to work.

Have a look on Responsinator - www.eyemack.co.uk to see what I mean.

Burger icon menu just doesn’t work.


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

Iain,

Try setting the overflow setting for “navbarcontainer” to visible.


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

Thanks Caleb. That works to an extent. The menu now pops up, but only stays visible for about a second, then it jumps back.

Any ideas?


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

No, I take it all back, it’s working fine. Great! Thank you.

Now, back to the question about getting the navbar to respond to different widths.

The responsinator doesn’t actually show what happens correctly, in fact the iPhone 6 landscape actually shows like the iPhone ‘plump’ portrait in real life.

There is no resizing of the navbar at all. Any suggestions there?


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

Having looked at your menu issue again I am seeing a problem in Chrome where the hamburger doesn’t appear.

Safari is OK for me, however there is a javascript error in both.

Maybe Safari is more forgiving.

What Browser(s) are you testing with?

D


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

Thanks Dave. The burger appears at 375 and below.

I’ve tested in Chrome, Safari and IE in Windows and OS X where possible, and it looks fine. I’ve tested on iPad 2,3 and Air, as well as iPhone 4, 4S, 5 and 6. It seems to work in all cases ok.

There is a slight issue between 375 and 560 in desktop browsers, but I don’t want to make the break higher than 375 as it looks fine in portrait on iP4 and 5 without burger. It’s unlikely people will be viewing on desktop lower than 560 I think.

The Java error is probably in the Smoothscroll action. I’ve seen that pop up occasionally in FW but it doesn’t seem to make any difference.


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

I’ve tested in Chrome, Safari and IE in Windows and OS X where possible, and it looks fine

This is what I get in Chrome 37 at 375 - but if yours is fine then I wouldn’t worry.

D


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

This is what I get in Chrome 37 at 375 - but if yours is fine then I wouldn’t worry.

Ian - apologies for this.

It appears that the resizing Extension that I have been using in Chrome isn’t working correctly and not actually resizing below 380 odd.

No wonder your Hamburger wasn’t showing for me!

D


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

I can’t get Chrome to go thinner than 400!

Safari works fine at 375 showing the burger, then at 376 it goes into the mode you saw in your grab.

My main question now though, is why can’t I get the nav bar to respond to changes in width like the rest of the site, i.e. gradually increasing or decreasing in size?


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

I can’t get Chrome to go thinner than 400!

Use an Extension/Bookmarklet like

I will have a look at your navbar issue later but it would have to be a workaround as the action interface sets the css used.

How do you want it to respond?

D


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

I just want to to react in the same way as all the other items do on the site, i.e. a gradually reacting to changes on width. Look at the top graphic for example.

Probably best to read my first post for a bit of background.

Thanks Dave. What area of Glasgow do you live in?


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

I just want to to react in the same way as all the other items do on the site, i.e. a gradually reacting to changes on width.

Then I would suggest that you would maybe adjust the text size in your Menu with some media queries as the Nav container is 100% width anyway.

This would be easier if the text in the menu had a specific class - currently it is just .style19

What area of Glasgow do you live in?

Bearsden - do you know Glasgow? Family?

D


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

Then I would suggest that you would maybe adjust the text size in your Menu with some media queries as the Nav container is 100% width anyway.
This would be easier if the text in the menu had a specific class - currently it is just .style19

Not sure what you mean there Dave. Media queries?

Bearsden - do you know Glasgow? Family?

Now come on! Bearsden? That’s not Glasgow - far too posh, and in Dunbartonshire!! haha!

Seriously though, I graduated at Glasgow University and lived there for 15 years. Still my favourite city in the world - as long as the Horseshoe Bar still exists. I still go back to see mates there about 2 or 3 times a year, but my brain can’t afford to lose so many cells any more!


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

This is a media query that might apply to your page/menu:

<style type="text/css">
@media screen and (max-width:1920px)
{
li.fwNavItem a span {
font-size: 2.5em !important;
color: black;
}
}
@media screen and (max-width:1500px)
{
li.fwNavItem a span {
font-size: 2em !important;
color: red;
}
}
@media screen and (max-width:1024px)
{
li.fwNavItem a span {
font-size: 1.5em !important;
color: white;
}
}
@media screen and (max-width:768px)
{
li.fwNavItem a span {
font-size: 1.3em !important;
color: blue;
}
}
@media screen and (max-width:568px)
{
li.fwNavItem a span {
font-size: 1.0em !important;
color: green;
}
}
</style>

You would insert that via Page>HTML Markup in the before slot

Give it a go on one of your pages and see what you get. I added colours just so that you could see the changes easily. Edit the sizes to suit your needs (and delete the colour declarations)

I too am an ex Glasgow Uni man - too many years ago!

The Horseshoe is still there - and no it doesn’t change much.

D


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

Thanks so much again, Dave. That was helpful and I have used a slightly modified version on site. However, what I was trying to achieve on the nav bar was the same gradual resizing that the rest of the site does, not a step routine.

The difference is that everything except the nav bar is in a page wrapper and an in-line design for reasons I mentioned in the first post.

Stil, your code has solved my problem on the iPhone, so thanks a lot for your time there.

If you feel inclined to consider, there are 3 other trivial things wrong that I can’t see how to fix.

  1. I have the responsive CSS menu set to go to the ‘burger’ at 375, yet, it shows on a iPhone 4 landscape which is 480.

  2. the positioning of the Exhibeo gallery. No matter what I’ve tried with all Exhibeo galleries, I have never been able to achieve a proper centering of the box on the page. Pulling the screen to different widths will show what I mean. It drifts to the left as the screen gets wider, and vice versa as it shrinks.

  3. the ‘eye’ image at the end of ‘Welcome’ loses it’s drop shadow in landscape iPad and iPhone 6 (maybe others) but is OK on these devices in portrait and desktops. Can’t see why that would be.

Any help appreciated, and, yes, I visited the Horseshoe and Tennents Bar (amongst others!) a couple of weeks ago, and it’s great to see nothing changes!


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

The difference is that everything except the nav bar is in a page wrapper and an in-line design for reasons I mentioned in the first post.

If you use the Sticker action on your navbar it can be an inline item too.

http://deltadesign.co/FW7Test/fixedheader.html

D


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

BTW - there is no need to declare a colour for the menu text in your media query - unless you are changing it from the standard set in the menu action or at different widths.

Having it there is just code bloat.

D


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

BTW - there is no need to declare a colour for the menu text

And dont forget that if you are going to declare a Hex colour you need to stick a # in front

ie color: 808092; WRONG

color: #808092; RIGHT

D


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