Im sure this is beyond the scope of support here, but Ill ask anyways.
I want to modify the CSS in such a way that when you scroll down the page, the nav bar will stay at the top of the screen, like the moodle.org page.
Go here: http://getbootstrap.com/2.3.2/components.html#navbar and scroll down to 'Fixed to top'.
There is a lot more beyond the surface of the ice-burg than you think.
Wow, this opens up a whole new world of customization.
Where do i apply these styles?
Nevermind, got it! theme/essential/layout/frontpage.php.
How can i make it so the page shows the normal navbar under the logo and social links, then once you have scrolled passed it the navbar becomes fixed to the top?
I just realized by editing the frontpage.php it only affects the front page
How would I apply this to all pages?
By editing the other layouts (located in essential/layout). Each one controls a different type of page in moodle.
Julian
> How can i make it so the page shows the normal navbar under the logo and social links, then once you have scrolled passed it the navbar becomes fixed to the top?
Generally this is done with the Bootstrap Affix plugin:
http://getbootstrap.com/2.3.2/javascript.html#affix
Note that it requires JQuery.
You can see a live demo here:
http://www.bootply.com/77602
As Gareth says, there's a whole massive ecosystem of Bootstrap stuff out there, we've barely scratched the surface in Moodle Themes.
Generally this is done with the Bootstrap Affix plugin:
http://getbootstrap.com/2.3.2/javascript.html#affix
Note that it requires JQuery.
You can see a live demo here:
http://www.bootply.com/77602
As Gareth says, there's a whole massive ecosystem of Bootstrap stuff out there, we've barely scratched the surface in Moodle Themes.
Hi David
I've been looking at your examples and trying to get something similar working with a clone of the Moodle Clean theme. I'm not having much luck though and am wondering if I'm missing something fundamental. Do I need to load the Bootstrap Affix plugin or anything like that? I've enabled jQuery in my theme.
Thanks
Richard
Hi Richard,
Yes, you either need to either load the Bootstrap.js (which includes affix.js) or affix.js on its own as well as JQuery, which they rely on.
Once that javascript is in effect you want to edit your HTML so that the navbar has the attribute data-spy="affix". You should be able to see if it's working as it'll add a class of either "affix" or "affix-top" onto the item you've added that attribute too.
Then you need to tweak the CSS for those classes to make it look as you want it in the two different states.
Yes, you either need to either load the Bootstrap.js (which includes affix.js) or affix.js on its own as well as JQuery, which they rely on.
Once that javascript is in effect you want to edit your HTML so that the navbar has the attribute data-spy="affix". You should be able to see if it's working as it'll add a class of either "affix" or "affix-top" onto the item you've added that attribute too.
Then you need to tweak the CSS for those classes to make it look as you want it in the two different states.