xriley / prettydocs-theme Goto Github PK
View Code? Open in Web Editor NEWFREE Bootstrap 5 Theme for Your Documentation/Project
License: Other
FREE Bootstrap 5 Theme for Your Documentation/Project
License: Other
In the code of side-menu you have been writing:
<div id="doc-nav" class="doc-nav">
<nav id="doc-menu" class="nav doc-menu flex-column sticky">
.....
</nav><!--//doc-menu-->
</div><!--//doc-nav-->
And on the Javascript code you have been writing:
/* ===== Stickyfill ===== */
var elements = $('.sticky');
Stickyfill.add(elements);
/* Activate scrollspy menu */
$('body').scrollspy({target: '#doc-menu', offset: 100});
Everything works ok for Google Chrome (cause it have support for sticky position and Stickyfill stay sleep), but on Edge the position of the side-menu escape the page. I think this is caused by Scrollspy of Bootstrap that ask for "position: relative" of side-menu when the menu is set to "position: sticky" with Stickyfill working (the Edge don't support yet sticky position).
To do side-menu works fine with Stickyfill and Scrollspy together I added a div to separate the position setting for Stickfill and the position setting for Scrollspy, like this:
<div id="doc-nav" class="doc-nav">
<div class="sticky">
<nav id="doc-menu" class="nav doc-menu flex-column">
.....
</nav><!--//doc-menu-->
</div>
</div>
With this code the Stickyfill works on div doing sticky position support and, separately, Scrollspy get relative position of nav element.
The Bootstrap 4 documentation ask us to set the relative position for the menu explicitly in css (sass file in this case), but I did not do it on this example because relative position is the default. For my application, I have declared relative position in .doc-menu class in _doc.scss file.
The Javascript code part is here only to show that Scrollspy and Stickyfill is working on the same element (both "#doc-menu" and ".sticky" go to the same element "nav"), I don't change any Javascript code.
I think I will help someone with this issue post and, if something I have placed here is wrong or incomplete, please tell me, I'm here to learn first at all.
How would i change the left side bar to static and move the current left side over to the right?
You currently depend on a standard bootstrap.css
to be compiled, with standard sizing/breakpoints/etc.
You should instead @import "~bootstrap/scss/bootstrap";
. Then, you can use the pt/px sizes from bootstrap.
You can also use the mixins provided by bootstrap, such as:
@include media-breakpoint-up(sm) {
// Styles
}
Ideally, in any theme developed for bootstrap, you should rarely be specifying any exact pt/px/colors.
This is very neat and slick theme. Many thanks for creating it! I have a few questions:
If we can cater 2 above then this theme can be very well utilized for writing blog articles.
Thanks again!
Hi
I like your theme very much. How could I use it in wordpress?
Is this still an active project? I would consider using it, but on mobile the NAV disappears and I don't see a hamburger. Any plans on fixing this? Thank you, JP
Hello,
Do you have any plan to upgrade to Bootstrap 4 ?
Thanks.
I like this style, but unfortunately it has no attributes associated with blogs or versions. Personally, I think this is necessary because a document is like a book, which is good for systematic presentation but not good for dynamic knowledge. Hope can be more and more beautiful, will continue to pay attention to.
Use full path to avoid errors like the following https://imgur.com/a/ItQhIlS that display when taking folder here and putting it into a web app's existing file outermost layer in public folder.
I noticed the paths were correct and it also rejected relative paths ie ./assets etc so change all instances of assets to PrettyDocs-Theme-master/assets ie switching to full path fixes this.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.