responsive css menu conflict ?

Freeway
1

I have a problem with the responsive css menu. After a breakpoint the hamburger menu is visible.

The problem is I have 2 menu’s on one page and only one of the hamburgers is working as expected. The other one doesn’t work. There must be some conflict in the css I think.

I could solve it by deleting one but visually I like the two lines of text in the desktop and Ipad size.

Do I have to ad some code or what can I do to solve this issue?

Thanks,
Joke

http://www.janniepranger.nl/2015/

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

2

In Chrome both Menus break over 2 lines - the container isn’t wide enough.

but visually I like the two lines of text in the desktop and Ipad size.

You could have a different Menu for larger screen sizes.

My thoughts are that the 2 menus clash because the rollovers dont match top to bottom ie bg colour change items are different sizes and it looks skew whiff top to bottom.

At the end of the day there is always a compromise between looks and UX - get it wrong and visitors get hacked off.

David

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

3

Thanks for your response David. I didn’t review it in chrome but I can fix the container width. Just did.

But I have the problem with the smaller screen sizes. Just one of the hamburger menu’s does function and the other one doesn’t. Maybe, as you said, when the menus are alike it works. I can try that.

And ofcourse I can choose just to show one and make a compromise but I like to fix the problem.

Joke

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

4

Hello Joke,
From what I can see both ‘hamburgers’ appear when the window is reduced. I am using safari. Not sure if this helps.

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

5

Hello Tonzodehoo,
The hamburgers appear, but only the first one reacts when you click on it. The second one only reacts when I remove the first one completely.

Joke

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

6

I think that the issue is with the javascript that responds to the click event.

It only responds to one item because of the way the script is written.

2 Responsive menus on the same page is not seen as a common use case if they share the same parent item.

That is my theory.

D

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

7

Another possible issue is that you also have a missing link to prototype.js on this page – the script tag is there, but it does not include its src attribute, it’s just src=“”. This is happening from the SmoothScroll Action, and I recommend you follow these troubleshooting steps around this Action.

Before you do anything else, check your Freeway preferences, and make sure that “Allow AppleScript in Actions” (wording uncertain) is checked on.

Next, remove the Action from the page. If it appears on any other pages, remove it there as well. After the entire document is clear of the Action, publish once. If you have any other documents currently open, close them. Make sure that only one document is open, and it is the one you are trying to fix.

Then, follow one of the following steps, depending on how your page was constructed.

If this document has always been created / edited in Freeway 7, locate your Actions folder in ~/Library/Application Support/Freeway Pro/Actions. Look in the Actions folder or the General folder within it, and ensure that there is only one copy of SmoothScroll installed there. As a best practice, simply delete all copies of the Action you find there, and empty the trash. Then download the latest version of the Action, un-zip it, and drag its icon over the Freeway icon in your dock. You should be challenged that you are installing an Action. You should not be challenged that you are replacing an existing Action.

If this document began its life in Freeway 6, and then was edited in Freeway 7, then you need to follow the steps above again, only this time you may not find the Action. If what I suspect has happened here – that you are using the cached version of the Action from within the document – then you won’t actually find the Action in your Actions folder at all. Or you may find it in ~/Library/Application Support/Freeway 6/Actions/General. The Action won’t be sourced from there in Freeway 7.

Finally, apply the Action to one page, and preview in a browser to see if it does what you expect.

Walter

On May 22, 2015, at 6:22 PM, DeltaDave email@hidden wrote:

I think that the issue is with the javascript that responds to the click event.

It only responds to one item because of the way the script is written.

2 Responsive menus on the same page is not seen as a common use case if they share the same parent item.

That is my theory.

D

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

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

8

Thanks Walter for your detailled reply !
This document is created based on a freeway template to master the principles of responsiveness.
I only worked on it in freeway 7.
As soon as I can van I will follow your instructions and post an update.

Joke

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

9

Walter,

I did all the above, but it didn’t fix the problem.
I now have another solution. I replace the menu at the 750 breakpoint with an image of the hamburger icon by checking and unchecking the ‘publish’ field.
I doesn’t function but the colour is subtile and it gives a nice balance. The hamburger menu becomes active when clicked on either ‘vocality’ or ‘musicolgy’ and then the other hamburger becomes inactive.
Haven’t uploaded it yet.

Joke

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