Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by garrycohen
garrycohen
13,914 Points

Adding a fixed nav in wordpress portfolio - help!

Hi!

I'm slowly creating my portfolio site using wordpress in between watching treehouse videos. I've nearly finished the web design track and will soon be moving on to finish the wordpress development videos and then maybe the front-end track..

I have watched Zac's video on creating a one page wordpress site and now I'm just struggling on how to I can achieve this sticking nav bar feature when you scroll (nav bar sticks to the top), to get the same effect on my wordpress site.

Can anyone tell me if this is possible without changing too much CSS in my wordpress theme or point me in the right direction?

I have tried adding this to the css in wordpress -

.site-navigation { position: fixed; width: 100%; top: 0; }

and it works but unfortunatly the nav bar starts at the top of the page soon as you visit the page unlike it does in the first link i added.. where it starts around 250px down..

So simply i just need it to start at around 200px down from the top and then when it scrolls to remain at the top!

Difficult one but I hope someone can help!

Many thanks Garry

2 Answers

Keiron Lowe
Keiron Lowe
2,993 Points

There is a new sticky value for the position property, but it's really new and has very little browser support. As far as I'm aware, the only cross browser way of doing this at the minute is Javascript.

There is a jQuery plugin here that should achieve what you want. Although if you want to learn, I recommend you try this yourself.

You would basically need to get the top position of the element, and listen to the scroll event. When the scroll reaches the top position of the element, add a class which changes it's position to fixed.

Hope this helps!

garrycohen
garrycohen
13,914 Points
garrycohen
garrycohen
13,914 Points

Thanks for your response Keiron.

I guess i'll need to start the front-end development track and get to grips with JS.. and then work out how to implement it to projects in future!

Luckily i have managed to find a wordpress plugin which does exactly what i want it to

Cheers