I was hoping to use a custom class to control the spacing between the navbar and content on our Case Study Page. This seems to work fine on desktop widths, but when I view the page on mobile it looks fine when the page is first loaded, but once I scroll the top margin is reduced dramatically and the headline is hidden behind the navbar. Is it possible to disable this behavior so I can maintain control over the top margin?
Thanks!
Hi Ergo,
The behavior that you are experiencing is not caused by the original theme. It is because of the customization that you have in X > Theme Options > CSS or the CSS section of the page itself using the Cornerstone.
If you remove your customization you will see that the top header will work normally even when you scroll down and back up on mobile devices.
The only temporary solution I can provide at this stage is to turn off the fixed positioning of the header on the mobile devices. Please kindly add the CSS code below to X > Theme Options > CSS:
@media (max-width: 767px) {
body.home .x-navbar-fixed-top {
position:static !important;
}
}
Thank you.
Hi Christopher,
I took your advice and removed all of our CSS, set the navbar to fixed for mobile, and made a new blank page with only a text list of numbers. It presents fine on screen with a 35px margin and my list of numbers, but when I load it on my phone the problem persistis: It looks great initially, but once I scroll the entire margin plus lines 1-4 disappear!
This behavior is nothing I have done, but rather seems to be coded into the X-Theme: when I inspect the top margin it is part of class “offset cf” which seems to be changed by the theme after I scroll on mobile. How can I disable this strange behavior on mobile?
Your workaround removes the navbar from the screen entirely which is not an option for us, so I have not experimented to see if that works. Could the theme have been hacked to shift contents up for mobile anticipating a lack of navbar in all cases without actually checking to see if one is present?
Thanks for your help with this!
Steve
ED: I have had to restore our CSS to continue development, but I believe that this behavior will occur on any test site, although perhaps only with our stack? Anyhow, after restoring our CSS and visiting the test site I noticed that it is now only covering up one row of text.
This supports my theory that the theme is pushing the text up by the navbar thickness as it expects the nav bar to have been removed in the mobile widths. It was shifting more before because our navbar was wrapping to two lines without our custom CSS so the theme was pushing the content up further.
ED2: I poked around a bit and hoped that setting .x-container>.offset { margin: 0 auto !important;} would set margin to 0 for mobile as well. It didn’t. I also found .x-navbar-fixed-top-active as an active class, but I don’t know what to do with it. Something is placing the top of the page at the top of the page rather than the bottom of the navbar on mobile after a scroll, but a can’t figure out how to stop it…
Hello Steve,
Kindly check your custom css because I just noticed that tis code were added:
.x-container>.offset {
margin: 35px auto !important;
}
Please remove it and test the site again.
I discussed that in the paragraph immediately above! It did not work as stated above! Would you please check to see if your solution works before sending it? THIS BEHAVIOR EXISTS IN VANILLA X-THEME WITH FIXED NAVBAR. Telling me to take out my CSS will not help, because I am testing on a platform without custom CSS. We have already established that custom CSS is not the problem. If you can’t get this behavior to go away on your test theme with a fixed navbar, it is not likely to work on my theme either! Is it possible to escalate this issue to someone that will take it more seriously?
Hello Ergo,
Since you have modified the fixed navbar with a custom css, you will need to modify it and use this instead:
@media (max-width: 979px){
.x-navbar-fixed-top {
position: fixed;
}
.x-container>.offset {
margin-top: 95px !important;
}
}
You will need to add more top margin so that the fixed navbar will not cover the content.
We would loved to know if this has work for you. Thank you.
I must be doing a really, really bad job communicating the problem. The problem is that the page loads with one top margin, say 30 pixels, and looks as intended:
Then, after you scroll down and back up the top margin as changed by exactly the height of the navbar, probably because the theme does not expect the navbar to be there:
To be clear, there is no way to scroll up so that you can see the top of the image or the headline. You can click here to see this live. Please test it on your mobile device if you can’t understand what the problem is from this description.
The problem is not the margins, padding, or any other single setting. The problem is that some setting is changing dynamically after the page loads as a result of the scrolling action on mobile. Even the tiniest scroll action will cause the page to snap to the top, behind the navbar, never to return. I don’t know javascript, but there is probably some onscroll action set that causes this behavior. Any help identifying this would be great!
Thanks!
ED: I Googled “onscroll” and learned that it does exist and is likely the solution to the problem. I could set an @media onscroll trigger to change the margin or padding to undo whatever the theme is doing. It would obviously be preferable to simply disable the theme’s onscroll behavior rather than allow it to jump, then jump back again with my trigger, but that is better than nothing… Unfortunately I don’t know javascript. I will keep poking around and see if I can sort it out but any help would be appreciated!
I have learned that onscroll only pertains to on screen scroll bars (this occurs when scrolled on my laptop too). The touchscreen equivalent that triggers the behavior on my phone seems to be ontouchend, as the screen does not snap back until I release my finger.
I also discovered scroll snapping in CSS but I believe the issue relates to onscroll.
Hi,
To resolve the issue, you can try adding this in Theme Options > JS
jQuery(function($) {
$(window).scroll(function(){
if($(this).scrollTop()==0){
$('.x-navbar').removeClass('x-navbar-fixed-top');
}
});
});
Hope that helps
Hi Paul, You’re the best! That did it!
Thank you, thank you, thank you, thank you!
You are most welcome. 
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.