-
Posts
-
I’m using Integrity, and seeing a vertical offset when using one page navigation in mobile devices – all phones and also tablets in portrait. Tablets in landscape or larger devices will scroll appropriately.
Scenario – Integrity one-page nav. Same result on pages with or without slider on top. Menu is fixed, although not really fixed on mobile device.
Issue: When tapping a menu item, the element with matched id does not go all the way to the top of the browser window. It appears to be offset by 50-100px (I can’t get the mobile dev tools ruler to play nice and remain visible). Is this a javascript issue or is there some css that can be adjusted to compensate for the offset scrolling?
I can not reproduce the issue on theme.co – the only page with one-page navigation is your home page. And the mobile menu is truly fixed there, and scrolling works properly. My site isn’t live yet, but here’s a screen shot of the offset:
Again, all is good on tablets in portrait or larger screen devices. And this isn’t a huge deal, I’m just thinking there has to be a simple fix here.
Hey there,
Thanks for writing in and being so thorough! You have no idea how much this helps us in troubleshooting. I think what is happening here is that the navigation has to have an offset equal to the height of the navbar so that it doesn’t cover up the bands on desktop as you scroll down the page. However, since the navbar becomes fixed on mobile for usability reasons, this offset is still present but the navbar is not, resulting in your gap. We will certainly take a look into patching this up for a later release.
Thank you for bringing this to our attention!
Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.
- <script> jQuery(function($){ $("#no-reply-8075 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
