How to make sidebar sticky for entire length of page
-
I’m struggling to get my sidebar (white box on the left) to stick to the side of the page when scrolling down. I have it set as Sticky in the Position, but as you can see, it is not.
I want my sidebar to act like this example page: https://marketifythemes.net/html/elisc/index-one-page.html
I’ve tried messing around with CSS but I am a total beginner and haven’t had any luck. I have the Premium plan so my website does not support plugins. Any help would be appreciated!
The blog I need help with is: (visible only to logged in users)
-
Hey there,
Thanks for reaching out!
So the first step would be to group what’s in the sidebar, and this will allow you to make the sidebar sticky. I created this to show you how this can be done:
I noticed this content was created in the homepage of the site – to check are you looking to have a scrolling style site much like: https://marketifythemes.net/html/elisc/index-one-page.html?
The reason why I ask is because it may be better to build this inside of the theme editor, via Appearance > Site Editor.
I hope this helps so far.
-
Perfect thank you! Ideally I would love to have a scrolling style site like the example I linked, but not sure if it’s entirely possible/how to go about setting it up with just my premium plan. If you have any suggestions on how best to format it please let me know!
-
Hey there,
Ok gotcha – so I’ve had a play around and created a template for you to help you get started.
This is called Scrolling Template and can be found here: https://amberlamphere.wordpress.com/wp-admin/site-editor.php?postId=pub%2Fstewart%2F%2Fwp-custom-template-scrolling-template&postType=wp_template&canvas=edit
The headings (home, resume, library) are anchor links, and the navigation the left are anchor links (for example #home) rather than links to pages.
I’ve created the page Home Test, and this can be found here: https://amberlamphere.wordpress.com/wp-admin/post.php?post=157&action=edit (https://amberlamphere.com/home-test/) and assigned the scrolling template.
Usually, the content would reside in the page, however, due to the scrolling nature of the page, the content would be added in the template – Scrolling Template here.
You could assign the Home Test page the front page via Appearance > Customize > Homepage Settings.
What are your thoughts? :)
-
Wow this is amazing, thank you so much!! You just saved me so much time and it’s looking exactly how I wanted.
I assigned the Home Test page as the front page. To continue building it out should I edit it from this page or on the template itself?
-
Hey there,
Glad it was useful!
To continue building it out should I edit it from this page or on the template itself?
In this instance, you would edit the template https://amberlamphere.wordpress.com/wp-admin/site-editor.php?postId=pub%2Fstewart%2F%2Fwp-custom-template-scrolling-template&postType=wp_template&canvas=edit to keep everything on one page.
I hope this helps!
- The topic ‘How to make sidebar sticky for entire length of page’ is closed to new replies.
WordPress.com Forums 