Add codepen examples!

diff --git a/docs/pages/smooth-scroll.md b/docs/pages/smooth-scroll.md
index 0995846f429de184122091b24ff6091221b8ad36..65854e2feb612cf1d40f75c5cc9d8f462e78705d 100644 (file)
--- a/docs/pages/smooth-scroll.md
+++ b/docs/pages/smooth-scroll.md
@@ -17,8 +17,12 @@ tags:
 
 To enable SmoothScroll on internal links, just add the attribute `data-smooth-scroll` to the parent container like our [Menu](menu.html). Each section needs a unique ID
 
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/jwOEEM?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
-<ul class="horizontal menu" data-smooth-scroll>
+<ul class="menu" data-smooth-scroll>
   <li><a href="#first">First Arrival</a></li>
   <li><a href="#second">Second Arrival</a></li>
   <li><a href="#third">Third Arrival</a></li>
@@ -32,6 +36,10 @@ To enable SmoothScroll on internal links, just add the attribute `data-smooth-sc
 
 You can also setup SmoothScroll directly via individual link.
 
+<div class="docs-codepen-container">
+  <a class="codepen-logo-link" href="https://codepen.io/IamManchanda/pen/NgWPab?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>
+</div>
+
 ```html
 <a href="#exclusive" data-smooth-scroll>Exclusive Section</a>
 <section id="exclusive">The Exclusive Section</section>