[Pro] Sticky Nav Menu

Doty1 · March 22, 2016, 9:53pm

Last year, Dave helped me build a CSS menu that had a sticky element built in using jQuery. Everything worked splendidly, but now I’m trying to do something a little more complex — adding in a submenu.

Everything works fine on the desktop, iPad and even Droid phones. The problem is with the iPhone. If you scroll to the bottom of the page on this website very quickly, as if you wanted to get to the bottom of the page, the CSS submenu will pop up unannounced and get in the way.

Here is a screenshot:

There are a couple of other oddities. When the menu pops up, it’s not the entire menu tree. In the screenshot, you can see that Resources & Contact are missing.

And, it appears to be erratic, not happening every time. When it happens, clicking the X does nothing. The only way to clear the menu is to hit the hamburger icon or refresh the page.

You can get around this error by scrolling very slowly. But, for me it happens about 50% when I’m scrolling quickly and it happens on every page.

As the iPad and desktop are unaffected, is it possible this is an error with the hamburger menu itself??

Thanks everyone!

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:

carla · March 23, 2016, 4:02am

Hi there… this glitch happened to a site I worked on once
it came from using Google Chrome on an iPhone. I had a sticky header bar so the the fix for it is
by removing the “Fixed in Window” attribute on the sticky header bar with the CSS Menu on it – but only at the 320 and perhaps 480 breakpoints.

I had a sticky header with my CSS menu and this was the fix but leave on Absolute on the wider breakpoints

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty1 · March 23, 2016, 12:39pm

Interesting idea, Carla. Thank you. I will give that a try and post my results.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty1 · March 23, 2016, 9:20pm

Hi Carla,

I’m not seeing the “fixed in window” or the “absolute” in my choice of options. The css menu is not inside of any containers. Also, I’m using the default Safari browser on the iPhone 6. You mentioned it was an issue with Chrome.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · March 23, 2016, 9:49pm

Doty try moving the script block down to the before end Body section - I would like to try it there.

ie the parts that starts

<script type="text/javascript">
		$(function(){ // document ready.....

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

carla · March 23, 2016, 10:05pm

Ah ok well listen to Dave then he is the master
What I was talking about was the sticky header not the Css menu which in my case was the issue
Good luck

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · March 23, 2016, 10:11pm

Just read a comment on the Developers site in response to a user that was having some issues on iPad

I wrote this a few years ago. I recall there being some differences in event listeners on iOS at the time. If I remember correctly, from a design perspective it is not recommended to have elements toggle their positioning on iOS devices - especially small screen devices. Given that I didn't explore developing this for iOS. I recommend reconsidering your design for iPad (iPhone), but that's your call. You can also try the jSticky plugin I wrote. That might work better. Good luck!

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty1 · March 24, 2016, 2:56pm

Dave,

Thank you for weighing in. I tried moving the script block as you suggested and I got the exact same results. You can see the page with the moved script here: bet007(中国)官方网站

Any other ideas?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · March 24, 2016, 11:27pm

Any other ideas?

I refer you back to the Developers comment and how he suggests trying his Plug In instead.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Doty1 · April 2, 2016, 3:04am

Dave,

I’m having trouble following the developer’s recommendations. I was wondering if I could approach this differently. Is there a way to “turn off” the sticky feature on the small breakpoint?

Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · April 2, 2016, 10:44am

Is there a way to “turn off” the sticky feature on the small breakpoint?

Sure - can you put up a test page and we can look at the best way to approach this.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

David_McCallum · April 2, 2016, 1:43pm

can you put up a test page

I mean a test page where you try the plug-in version.

However you have to be careful that you dont use things like this on pages that don’t warrant it ie pages that dont have enough content to justify it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Doty1 · April 18, 2016, 10:56pm

Hi Dave,

Sorry for disappearing. This project was put on hold and I am just now getting back to it. Here is my test page: http://www.mountainmentalhealthclinic.com/admin/index.html

I looked into the github link you posted and could not figure out what I was supposed to do. It was over my head. Although while I was there I found this post about removing a plugin for smaller screens that gave me the idea.

As far as I can tell, the sticky header is working just fine on everything but the phone in vertical orientation. I’m using an iPhone 6 (not sure what breakpoint that is), but horizontal is fine, vertical is not.

Thanks for the help!

Doty

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty1 · April 22, 2016, 5:30pm

Does anyone know if it’s possible to turn “off” a jQuery script for only the smallest breakpoint? I’m still stuck in the weeds on this problem.

Thanks!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Todd3 · April 22, 2016, 5:38pm

Something like this?

Todd

First, RTFM. Then ask.

Does anyone know if it’s possible to turn “off” a jQuery script for only the smallest breakpoint? I’m still stuck in the weeds on this problem.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Doty1 · April 22, 2016, 6:18pm

Perhaps, Todd. Thank you for pointing this out. I’m not sure what value to enter. So far, the problem is only occurring on the iPhone 6 when held in vertical orientation. (And not on Android phones at all). I’ve tried googling to figure out the px (breakpoint) for the iPhone 6, but I’m still unsure.

Note: I know we are not supposed to design for specific breakpoints like this. (I can hear Thomas in my head as I type this). But as I seem to have discovered a glitch that only happens at this breakpoint, I’m stumped for other solutions. Anyone have other ideas?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · April 22, 2016, 9:53pm

the problem is only occurring on the iPhone 6 when held in vertical orientation.

iPhone 6S is 375px wide and the 6+ 414

I missed this post and will have a look on my 6S now that I have seen it.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

David_McCallum · April 22, 2016, 10:05pm

And referring to Todd’s suggestion try the following (where 414 is the 6S+ width) in place of the current Script block you have in before End Body.

<script type="text/javascript">
if($(window).width() > 414) {
		$(function(){ // document ready

		  if (!!$('.sticky').offset()) { // make sure ".sticky" element exists

		    var stickyTop = $('.sticky').offset().top; // returns number 

		    $(window).scroll(function(){ // scroll event

		      var windowTop = $(window).scrollTop(); // returns number 

		      if (stickyTop < windowTop){
		        $('.sticky').css({ position: 'fixed', top: 0 });
		      }
		      else {
		        $('.sticky').css('position','static');
		      }

		    });

		  }

		});
		}
</script>

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty1 · April 22, 2016, 10:35pm

David,

Thanks for looking at this again and for your patience. I have to head out for the evening, but I will get back to this asap and post my results!

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Doty1 · April 22, 2016, 10:47pm

Ok, I was so anxious to try I’m probably going to be late. Here is my test page: http://www.mountainmentalhealthclinic.com/admin/index.html

It doesn’t seem any different to me (drop down menu is still auto selecting on iPhone). But I don’t have time to test it thoroughly. Maybe I did something incorrectly in my haste?

Thanks again Todd & David.

freewaytalk mailing list
email@hidden
Update your subscriptions at: