Fixed Header in Tremont

Hello everyone,

Is there a way to make a fixed header within Tremont? I tried utilizing .site-header { position: absolute:} which does work at keeping the header at the top of the page; however, I noticed on mobile this allows the active page to be infinitely swiped off screen to the left revealing the index page. Is there an addition that could prevent this from happening or another method fo fixing the header?

Thanks

Hi. Can you share site url? We can check easier.

Hello, thanks for the reply! The site URL is currently buffalo-cheetah-7ax6.squarespace.com and I've set the password as password for viewing. For reference, I ended up coding it so the fixed/pinned header only applies to desktop, and I don't entirely mind the sticky/following header on mobile, but if there is a method for pinning on mobile, I would be interested. (I've re-activated the problem line so the issue should be present again) Thanks again!

On 9/24/2020 at 10:02 AM, Maielstrom said:

Hello, thanks for the reply! The site URL is currently buffalo-cheetah-7ax6.squarespace.com and I've set the password as password for viewing. For reference, I ended up coding it so the fixed/pinned header only applies to desktop, and I don't entirely mind the sticky/following header on mobile, but if there is a method for pinning on mobile, I would be interested. (I've re-activated the problem line so the issue should be present again) Thanks again!

Sorry about that! It should be active again.

DO you use Personal or Business Plan? I think we need to use JavaScript

Thanks for the reply! After the trial, I'll just be on a personal plan for this one. (And I believe Javascript is for business/commerce only?) Not a big deal though, I don't mind the sticky/follow header existing on mobile/tablet, it's mostly desktop where I wasn't a fan of how it looked, which I was able to work out through a min-width function; however, I am curious if there is another method to display/execute functions for mobile vs. desktop? (Something that checks the browser for what type of device is requesting the site and only executes the code if it is desktop - my concern, and perhaps it is a misunderstanding of how @media screen and (min-Width: ##px) works, is what if in the future device pixel widths surpass the threshold I have in place. The reverse would be true too, as I tested dropping a desktop screen resolution to an 800 width and it did display what should be mobile only - I'm using a min-width of 950px for this header situation, which is a number I pulled from some parameters I found while searching)