Topic: Side bar init location and use

Midi Hipi pro asked 7 years ago


Where and how do I init the sidebar in the body of the html file?? I saw it in a tutorial somewhere but I can't seem to find it now.....

Marta Wierzbicka staff answered 7 years ago


We haven't tested scrollspy with sidenav but you can try this solution: Add class .smooth-scroll and id to 'side navigation links' like here:
<!-- Side navigation links -->
        <ul class="collapsible collapsible-accordion smooth-scroll" id="scrollspy1">
            <li><a class="collapsible-header waves-effect" href="#section1">Click me</a>
                
            </li>
            <li><a class="collapsible-header waves-effect" href="#section2">Click me</a>
                
            </li>
            <li><a class="collapsible-header waves-effect" href="#section3">Click me</a>
                
            </li>
        </ul>
        <!--/. Side navigation links -->
Then add ids to your main content. Example:
<div data-spy="scroll" data-target="#scrollspy1" data-offset="0">        
    <!--Section: Magazine v.1-->
    <section class="section magazine-section" id="section1">

        <!--Section heading-->
        <h1 class="section-heading">Section title</h1>

        <!--Section description-->
        <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <!--First row-->
        <div class="row text-xs-left">

            <!--First column-->
            <div class="col-lg-6 col-md-12">

                <!--Featured news-->
                <div class="single-news">

                    <!--Image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <div class="news-data">
                        <a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
                        <p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
                    </div>
                    <h3><a>Top 5 places in Italy you need to visit.</a></h3>
                    <p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
                    </p>

                </div>
                <!--/Featured news-->

            </div>
            <!--/First column-->

            <!--Second column-->
            <div class="col-lg-6 col-md-12">

                <!--Featured news-->
                <div class="single-news">

                    <!--Image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <div class="news-data">
                        <a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
                        <p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
                    </div>

                    <h3><a>How to start PR career in New York?</a></h3>

                    <p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
                    </p>

                </div>
                <!--/Featured news-->

            </div>
            <!--/Second column-->

        </div>
        <!--/First row-->

    </section>
    <!--/Section: Magazine v.1-->

    <!--Section: Magazine v.1-->
    <section class="section magazine-section" id="section2">

        <!--Section heading-->
        <h1 class="section-heading">Section title</h1>

        <!--Section description-->
        <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <!--First row-->
        <div class="row text-xs-left">

            <!--First column-->
            <div class="col-lg-6 col-md-12">

                <!--Featured news-->
                <div class="single-news">

                    <!--Image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <div class="news-data">
                        <a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
                        <p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
                    </div>
                    <h3><a>Top 5 places in Italy you need to visit.</a></h3>
                    <p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
                    </p>

                </div>
                <!--/Featured news-->

            </div>
            <!--/First column-->

            <!--Second column-->
            <div class="col-lg-6 col-md-12">

                <!--Featured news-->
                <div class="single-news">

                    <!--Image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <div class="news-data">
                        <a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
                        <p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
                    </div>

                    <h3><a>How to start PR career in New York?</a></h3>

                    <p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
                    </p>

                </div>
                <!--/Featured news-->

            </div>
            <!--/Second column-->

        </div>
        <!--/First row-->

    </section>
    <!--/Section: Magazine v.1-->

    <!--Section: Magazine v.1-->
    <section class="section magazine-section" id="section3">

        <!--Section heading-->
        <h1 class="section-heading">Section title</h1>

        <!--Section description-->
        <p class="section-description">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <!--First row-->
        <div class="row text-xs-left">

            <!--First column-->
            <div class="col-lg-6 col-md-12">

                <!--Featured news-->
                <div class="single-news">

                    <!--Image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/City/6-col/img%20(27).jpg">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <div class="news-data">
                        <a href="" class="light-blue-text"><h5><i class="fa fa-plane"></i> Travels</h5></a>
                        <p><strong><i class="fa fa-clock-o"></i> 20/08/2016</strong></p>
                    </div>
                    <h3><a>Top 5 places in Italy you need to visit.</a></h3>
                    <p> Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. 
                    </p>

                </div>
                <!--/Featured news-->

            </div>
            <!--/First column-->

            <!--Second column-->
            <div class="col-lg-6 col-md-12">

                <!--Featured news-->
                <div class="single-news">

                    <!--Image-->
                    <div class="view overlay hm-white-slight">
                        <img src="http://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20(90).jpg">
                        <a>
                            <div class="mask"></div>
                        </a>
                    </div>

                    <!--Excerpt-->
                    <div class="news-data">
                        <a href="" class="red-text"><h5 class="purple-text"><i class="fa fa-money"></i> Business</h5></a>
                        <p><strong><i class="fa fa-clock-o"></i> 24/08/2016</strong></p>
                    </div>

                    <h3><a>How to start PR career in New York?</a></h3>

                    <p>Sed ut perspiciatis unde voluptatem omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae explicabo.
                    </p>

                </div>
                <!--/Featured news-->

            </div>
            <!--/Second column-->

        </div>
        <!--/First row-->

    </section>
    <!--/Section: Magazine v.1-->
</div>  
Best, Marta

Midi Hipi pro answered 7 years ago


Thanks for the link but my question is where do I place the init? In the head, right above the sidebar nav, in the fixed sidebar? I can't seem to get it to work although I have before. I have forgotten what I did. In the "basic example" there is no init code. I can't tell where to put that code from the basic example. Bradley

Marta Wierzbicka staff answered 7 years ago


Hello, here you have explanation how to implement sidenav in html file: http://mdbootstrap.com/javascript/sidenav/ Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags