Fixed Header / Anchor Links / Scrolling up to top
-
-
- Justin Geering
- Newbie
- Posts: 9
- Thanks: 4
-
This has been bugging me for a while.
First off, this is NOT the scroll to anchor link issue.
This is scrolling back up to the top AFTER you click the anchor link.
The top margin for some reason doesn't get set so the top part of the page is covered by the header.
For example, go to new.howies.com/commercial-trash-recycling.html#dumpsters
Then scroll back up to the top of the page.
Compare to new.howies.com/commercial-trash-recycling.html .
If you click To Top link at the bottom if resets things correctly however.
I have this issue on multiple sites and cannot figure out.
It is only when we used the fixed header.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Please would you post your URL, superuser id and pswd in the secure tab of your post and I'll have a look for you.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Justin Geering
- Newbie
- Posts: 9
- Thanks: 4
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I've changed the values and it appears to work now. Please test.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Justin Geering
- Newbie
- Posts: 9
- Thanks: 4
-
WHile changes make work for
new.howies.com/commercial-trash-recycling.html#dumpsters
It pretty much add spacing at the top which causes problems when you don't use anchor links.
If you visit the page normally, there is excessive spacing now in general at the top:
e.g. new.howies.com/commercial-trash-recycling.html
This image is hidden for guests.
Please log in or register to see it.
I tried some thing like this already with --top-spacing and scroll-padding-top like at css-tricks.com/fixed-headers-on-page-lin...pping-content-oh-my/
But that didn't solve the problem when scrollnig backup to the top.
It would just add padding above for #achor (whcih is nice but not hte problem).
If there was a way to do that add that padding ONLY to <html> when linking to an #achor, I've yet figure out.
To me it seems like the fixed header top margin/padding values don't get calculated correctly or reset when you click an #anchor tag.
Ironicly if you click the back to top link at the bottom of the template, it resets everything correctly.
So not sure if the is a CSS or JS issue.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
I just get "error" on white page when visiting your site now?
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- Justin Geering
- Newbie
- Posts: 9
- Thanks: 4
-
Sorry, I was doing some late night updates to the server (Chicago time).
You should be fine now.
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13484
- Web Designer/Developer
-
Ok, sorry for the delay... I spent ages analysing this issue.
I've fixed it now with one CSS statement at the top of your custom.scss and I also reset the fixed header padding back to the correct value of 181px.
Try it now.
Regards, Mark. -
The following users have thanked you: Justin Geering
- Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
Time to create page: 0.052 seconds