Menu behavior inconsistent [#1978172]

Madam/Sir,

there is a slight inconsistency in the behavior of the Professional Theme menu.

It seems the menu has two states when the visible screen width falls below 640 pixels.
(N.B. I know that the menu should look different below a visible screen width of 640 pixels, that's
one of the reasons why I think Professional Theme is great, but that's not the issue here.)

The following description is best performed with two browsers:
In one you are logged in as administrator, in the other you are an anonymous user.

STATE 1
This state can be encountered in a fresh install of Professional Theme or after
performing the following steps:
1) Start with a visible screen width below 640 pixels
2) Click on the bar labeled "Navigation" (Menu appears as expected)
3) Clear cache (/admin/config/development/performance)
4) Click on the bar labeled "Navigation" (Menu disappears as expected)
5) Resize visible screen width above 640 pixels (notice how the text "Navigation" of the complete menu bar
vanishes, but this is another matter)
6) Reload the current page in your browser (Text reappears, this time the "normal" menu items as expected
at this visible screen width)
7) Resize visible screen width below 640 pixels
8) Click on the bar labeled "Navigation" (Menu appears as expected)
9) Hover mouse over a menu item with subitems: menu expands

Step 9 shows the menu in STATE 1: mouse hover opens submenu
(See also attached figure "STATE_1.png")

STATE 2
Starting from STATE 1, this state is easily obtained:
1) Click on the Bar labeled "Navigation" (Menu appears as expected)
2) Click on a menu item with subitems: the menu closes, the navigation bar labeled "Navigation" is visible.
3) Click on the bar labeled "Navigation": Menu reappears as expected, BUT now there is a encircled arrow
on the menu item which has been clicked on in step 2.

In this STATE 2, subitems can only be reached by clicking on the encircled arrow. To make them disappear,
you also have to click on the encircled arrow. (See also attached figure "STATE_2.png")

I have tested this behavior in Opera Version 12.14 and in Firefox Version 19.02

This behavior can be influenced by tweaking the file custom.js at the path \sites\all\themes\professional_theme\js\custom.js (Windows-path).

But hours of trying didn't get me anywhere. I tried to get rid STATE 1, but to no avail.

Maybe someone cleverer than me can help.

Best regards,
CatsAreNice

Comment	File	Size	Author
	STATE_2.png	3.61 KB	CatsAreNice
	STATE_1.png	3.83 KB	CatsAreNice

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

mheinke CreditAttribution: mheinke commented 24 April 2013 at 15:25

i have seen this myself. and there was another issue on this.

it has to do with the way the JS loads breakpoints.

but i have a question....(and this is what we derived at in the other issue) whats the use case for this? i mean...expanding and shrinking your browser isnt really...a normal web browsing experience.

once the menu is loaded...typically its going to stay at that size....correct?

Comment #2

CatsAreNice CreditAttribution: CatsAreNice commented 24 April 2013 at 17:05

Dear mheinke,

thank you for responding that quickly!

Yes, usually the visible screen width stays the same. BUT (and this is really a big "but") there are
so many browsers out there for mobile devices and even for good old Windows computers and
notebooks that I'm feeling a bit queasy about what might happen.
With browsers like Firefox or Opera you can resize the visible screen width easily by hitting the key
combination "Crtl+B" making e.g. the bookmark column visible or hiding it.
And even without that voluntary resizing of the visible screen width the OS of certain devices might
change it on their own.

Leaving aside how the menu behaves due to resizing the visible screen width, there still is the fact
that STATE 1 of the menu always occurs the first time a user hits a website using Professional Theme.

Sir, I don't intend to criticize Professional Theme or you in any way. Professional Theme in my opinion
is the best responsive theme out there to start working immediately (closely followed by Bamboo).
I just try to help making it even better.
So please accept my apology if I unintentionally wrote something wrong.

Best regards,
CatsAreNice

Comment #3

mheinke CreditAttribution: mheinke commented 24 April 2013 at 19:11

no appology needed.
this is healthy discussion and i agree with it :).

its curious though, one of my production sites is using the professional theme http://www.mainstreamenergy.com and i have yet to see this issue.

im not sure what the fix is. ive played around alot with the javascript and have yet to understand what it is that causes this.

i am still working on improving browser compatibility. that's one of my main pushes for a 2.0 release.

Comment #4

CatsAreNice CreditAttribution: CatsAreNice commented 24 April 2013 at 21:10

Dear mheinke,

I have tested your production site using professional theme http://www.mainstreamenergy.com
in Opera Version 12.14 and in Firefox Version 19.02.

On my first visit to this sites with both browsers the menu was in STATE 1.

Clicking on the menu item "Our Companies" transferred the menu into STATE 2.

By the way: http://www.mainstreamenergy.com looks really professional.

But there seems to be a slight line break problem with visible screen widths above 960 pixels
at (e.g.) "http://www.mainstreamenergy.com/aee-solar-inc" in the sidebar text "REC Solar
Residential Savings Estimator Enter your zip code to see how much you could save at home:"
at least when viewed with Firefox Version 19.02 in responsive mode:
The "w" of "how" in "Enter your zip code to see how" is only visible as "v" and the colon in "you
could save at home:" is directly on the block border.
It even looks worse in Opera, as I found out right now.

Just an idea:
If I may make so bold as to suggest that you and the developers of Bamboo work together?
Your themes are the two best responsive allrounder themes out there and it is really hard to
decide which to use. Right now I still think that Professional Theme is first choice, but Bamboo
is so close behind that it really hurts not to have its color scheme at one's disposal. And the
mobile state of Bamboo's menu also looks impressive but it lacks the accordion style for
subitems which makes Professional Theme preferable.
Both themes are first class.
And you are already in contact, I see: http://drupal.org/node/1972098#comment-7339298.

Best regards,
CatsAreNice

Comment #5

mheinke CreditAttribution: mheinke commented 24 April 2013 at 21:21

i would love that!

im always willing to take on co-maintainers :) and be a co-maintainer on the bamboo theme as well, maybe even just a new theme, coop project? i dont know.

im not the best facilitator in the world so if you want to bring that together...id be more then happy to get in on it.

im usually in the IRC (same username as here) i dont know how often you are or the Bamboo developers are but thats a great place to meet up and talk.