Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap scrollspy vertical menu

Suggested Video Tutorials
Part 46 - Bootstrap alert
Part 47 - Bootstrap scrollspy
Part 48 - Bootstrap scrollspy not working

In Part 47, we discussed using using the Scrollspy plugin with horizontal navigation menu. In this video we will discuss using it with a vertical navigation menu.

bootstrap scrollspy vertical menu

<!doctype html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap tutorial for begineers</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="CustomStyles.css" rel="stylesheet" />
    <style type="text/css">
        body {
            position: relative;

        #mainNavbar {
            top: 20px;
            position: fixed;
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <nav id="mainNavbar">
                    <ul class="nav nav-pills nav-stacked">
                        <li class="active"><a href="#divDesert">Desert</a></li>
                        <li><a href="#divLighthouse">Lighthouse</a></li>
                        <li><a href="#divTulips">Tulips</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Animals <span class="caret"></span>
                            <ul class="dropdown-menu">
                                <li><a href="#divJellyfish">Jellyfish</a></li>
                                <li><a href="#divPenguins">Penguins</a></li>

            <div class="col-xs-9">
                <div id="divDesert">
                    <img src="Images/Desert.jpg" class="img-responsive" />

                <div id="divLighthouse">
                    <img src="Images/Lighthouse.jpg" class="img-responsive" />

                <div id="divTulips">
                    <img src="Images/Tulips.jpg" class="img-responsive" />

                <div id="divJellyfish">
                    <img src="Images/Jellyfish.jpg" class="img-responsive" />

                <div id="divPenguins">
                    <img src="Images/Penguins.jpg" class="img-responsive" />

    <script src="">
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
                target: '#mainNavbar',
                offset: 10

If you want the navigation menu on the right hand side, place the <div> element with class col-xs-3 after the <div> element with class col-xs-9

bootstrap tutorial for beginners

1 comment:

  1. sir, for the vertical scrollspy to work you must include
    < body data-spy="scroll" >


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.