"Affix scroll spy nav bar"
Bootstrap 3.3.0 Snippet by Mohan.P

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <body data-spy="scroll" data-target=".scrollspy"> <header> <nav class="nav navbar-default navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="/index.html">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li><a href="/about.html">Tutorial</a> </li> <li><a href="/membership_details.html">Page</a> </li> <li><a href="/sign_up.html">Tips</a> </li> <li><a href="/log_in.html">Log Out</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> </nav> </header> <section class="container"> <div class="row"> <nav id="target-nav" class="col-md-3 scrollspy side-nav"> <ul id="nav" id="scroll-spy" class="nav hidden-xs hidden-sm" data-spy="affix"> <li> <a href="#one">Heading One</a> </li> <li> <a href="#two">Heading Two</a> <ul class="nav"> <li> <a href="#two-a">Sub Heading A</a> </li> <li> <a href="#two-b">Sub Heading B</a> </li> </ul> <!--end of sub navigation--> </li> <li> <a href="#three">Heading Three</a> </li> <li> <a href="#four">Heading Four</a> </li> </ul> <!-- end of main navigation --> </nav> <div id="scroll-able" class="col-md-9 col-md-offset-3" data-spy="scroll" data-target="#target_nav"> <section id="one"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="text-center">Heading One</h2> <p> At Bootply we attempt to build simple Bootstrap templates that utilize the code Bootstap CSS without a lot of customization. Tia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quo litteris qui iudicem id nescius fugiat sed laboris familiaritatem a deserunt tamen multos ex sint ab nostrud eu ingeniis. Quorum offendit de minim dolore. Labore appellat a deserunt. Summis qui id legam iudicem, tempor malis admodum iudicem. Officia ut quae ea o amet officia litteris. Ipsum singulis id sempiternum eu te multos familiaritatem. Probant a vidisse in an velit reprehenderit ita de arbitror distinguantur hic amet fidelissimae doctrina varias incurreret, se tamen voluptate philosophari, nostrud culpa ex laboris eruditionem o se legam efflorescere, non appellat qui eiusmod. Offendit o enim singulis ad arbitror veniam appellat admodum. An non summis fore summis. Culpa occaecat de magna quis sed ad veniam excepteur nam non legam arbitror cohaerescant a possumus quae quid e labore. Id probant exercitation. Eu voluptate firmissimum et ab litteris de aliquip si nam noster graviterque, iis doctrina familiaritatem, nulla est hic amet nescius, ea commodo ad doctrina est dolor ex mandaremus est aute, si fabulas domesticarum. Velit cupidatat si irure dolor, incurreret sunt possumus. Te sint a quem in te quem voluptate. Sint probant est cernantur sed mandaremus ipsum pariatur e proident et labore, ad cillum esse dolor singulis. Et aute quo culpa, pariatur te anim non ut te legam quorum minim e fabulas magna quamquam. Singulis culpa e senserit relinqueret e ubi quis cupidatat senserit in laborum an veniam cernantur ex a quis mentitum comprehenderit qui ex cillum excepteur iis anim ea tempor et incididunt et illum, non sint a velit. Fugiat offendit qui philosophari sed aliquip ex elit officia, ab nescius consectetur in labore quibusdam ullamco ubi legam laboris expetendis, ex ad instituendarum, velit arbitrantur voluptate sunt commodo ea nescius quis lorem proident quis. Qui sint deserunt quamquam de tempor aliqua esse nam aute, arbitror tamen magna sed fugiat et probant concursionibus in mandaremus. Commodo sed quid tempor do sint ne occaecat a legam. Doctrina duis esse laborum nisi, pariatur domesticarum quo deserunt, e voluptate ab litteris, nisi ita deserunt. Id sint cillum ubi nescius. </p> </div> </div> </section> <section id="two"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="text-center">Heading Two</h2> <p>Anim ubi possumus ne quid. Deserunt malis possumus e duis deserunt ubi aliqua fugiat. An amet admodum hic te summis possumus, ab veniam praesentibus e mandaremus ita consequat, o magna laborum officia, cernantur do legam pariatur, do se quem sunt noster, incurreret minim laboris. Ab anim nescius vidisse aut enim commodo distinguantur an senserit e legam, ullamco ab sint mandaremus. Summis laboris exquisitaque de illum possumus relinqueret, lorem cupidatat o eiusmod, dolor ut laborum ea veniam, ex aut praesentibus ubi multos consequat transferrem, eiusmod nulla qui arbitror voluptatibus, iis lorem sint ut mentitum. Malis ullamco sed arbitror, ita labore mentitum, vidisse malis cillum nostrud fore, ingeniis elit mentitum. Ita veniam esse multos voluptate, cupidatat nisi eiusmod est laboris sint varias iis enim in se minim legam nam pariatur. Do varias quid quis voluptate, o fore sed dolor, pariatur cillum non expetendis praetermissum, quo enim excepteur aliquip. Irure ullamco est quid quae. Ea consequat nam occaecat, ullamco enim iudicem incurreret qui ita quo fugiat illum quorum si fore nam quamquam hic duis ubi sed tamen eram quem iudicem se id magna distinguantur do anim ex iudicem, fugiat voluptate a pariatur. Officia te ingeniis aut id veniam ipsum sed nescius hic incurreret aute quamquam litteris, nulla nostrud transferrem, minim ne arbitror de cupidatat est magna deserunt, est ita quae nescius non malis quibusdam nam probant. Cillum cernantur a sint fore ab te eram non amet. Minim expetendis in tamen dolore. Illum ingeniis occaecat, quorum appellat ex praetermissum. Non legam voluptate, cillum nostrud cernantur ab cernantur an amet de iis nescius do incurreret. Multos admodum familiaritatem. Noster nescius an praetermissum o mandaremus irure fugiat admodum esse do iis senserit te singulis, litteris firmissimum in iudicem sed ita dolore laboris do laboris amet sint cernantur enim o voluptate minim ullamco officia, nam est sunt fugiat eram. Ex velit id lorem. Velit ingeniis ab voluptate id nam summis relinqueret, eu legam quae quo occaecat, lorem offendit coniunctione ut aliqua aut incurreret id anim, fugiat excepteur eiusmod se quamquam dolor fabulas litteris, cillum laboris et despicationes. Quo e dolor occaecat. E hic sint mentitum sed iudicem praetermissum a litteris, deserunt irure de commodo comprehenderit, nisi quamquam ad admodum. Aut tempor fidelissimae aut ea iis relinqueret si duis se commodo ex fore, ut fugiat senserit, sint officia te amet irure, vidisse id proident ex arbitror ipsum vidisse, incurreret quis eiusmod voluptate. Ingeniis dolore aliquip tempor, non quis nulla quo appellat ex incurreret esse velit de aute, commodo sunt an appellat exercitation an se dolore consectetur, lorem laboris te fugiat quem non te probant illustriora et ad tamen quorum amet quamquam. Sint non ingeniis, sed noster id culpa est ab culpa familiaritatem ita lorem iis appellat. Deserunt velit nostrud, tamen e admodum sed aliqua, esse et pariatur ubi se aliqua ingeniis vidisse ab amet admodum id eruditionem qui quid quamquam qui concursionibus ad ingeniis tractavissent o pariatur ab id do consectetur. Si eram eram eram cupidatat, expetendis culpa consequat vidisse. Ullamco duis magna vidisse labore, quo excepteur instituendarum, quorum consectetur laborum duis admodum, multos ullamco iis pariatur, aute doctrina hic litteris do in ita reprehenderit qui probant si aliqua, de aliquip illustriora. </p> </div> </div> <section id="two-a"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="text-center">Heading Two A</h2> <p>Anim ubi possumus ne quid. Deserunt malis possumus e duis deserunt ubi aliqua fugiat. An amet admodum hic te summis possumus, ab veniam praesentibus e mandaremus ita consequat, o magna laborum officia, cernantur do legam pariatur, do se quem sunt noster, incurreret minim laboris. Ab anim nescius vidisse aut enim commodo distinguantur an senserit e legam, ullamco ab sint mandaremus. Summis laboris exquisitaque de illum possumus relinqueret, lorem cupidatat o eiusmod, dolor ut laborum ea veniam, ex aut praesentibus ubi multos consequat transferrem, eiusmod nulla qui arbitror voluptatibus, iis lorem sint ut mentitum. Malis ullamco sed arbitror, ita labore mentitum, vidisse malis cillum nostrud fore, ingeniis elit mentitum. Ita veniam esse multos voluptate, cupidatat nisi eiusmod est laboris sint varias iis enim in se minim legam nam pariatur. Do varias quid quis voluptate, o fore sed dolor, pariatur cillum non expetendis praetermissum, quo enim excepteur aliquip. Irure ullamco est quid quae. Ea consequat nam occaecat, ullamco enim iudicem incurreret qui ita quo fugiat illum quorum si fore nam quamquam hic duis ubi sed tamen eram quem iudicem se id magna distinguantur do anim ex iudicem, fugiat voluptate a pariatur. Officia te ingeniis aut id veniam ipsum sed nescius hic incurreret aute quamquam litteris, nulla nostrud transferrem, minim ne arbitror de cupidatat est magna deserunt, est ita quae nescius non malis quibusdam nam probant. Cillum cernantur a sint fore ab te eram non amet. Minim expetendis in tamen dolore. Illum ingeniis occaecat, quorum appellat ex praetermissum. Non legam voluptate, cillum nostrud cernantur ab cernantur an amet de iis nescius do incurreret. Enim ea mentitum ne aute hic duis eiusmod qui senserit, quem cohaerescant pariatur velit commodo, senserit minim minim mentitum quae, quorum possumus distinguantur, cupidatat quid in eiusmod domesticarum a senserit dolore possumus laboris, ullamco enim incididunt. Velit singulis aut legam quis. Ea proident ex incididunt, ingeniis cillum veniam ut fugiat, quem nam laboris, summis tractavissent probant sint incididunt. Fugiat do probant in quae quo iis amet cernantur senserit ut deserunt sint admodum ingeniis si noster praetermissum proident quis occaecat. Tempor ubi illum, ubi arbitror firmissimum et nisi se proident, officia quem occaecat appellat ab sint ne voluptate, excepteur quem esse se enim et non quis probant, enim ne est legam consequat. Mandaremus dolor irure offendit quem, iis litteris arbitrantur et arbitror ita voluptate, occaecat id pariatur, fugiat laboris ex eiusmod quo consequat magna litteris te duis mandaremus iis instituendarum, ne incurreret concursionibus. Aut mandaremus ea ullamco de ne ad dolor veniam sint, aut quid non fore, iudicem velit cillum fabulas irure. Do ne noster vidisse ita proident velit aute ullamco aliqua iis ex senserit hic voluptate o ut nulla noster nulla incididunt. Quorum cupidatat arbitrantur, laboris qui expetendis. Nam quis proident incurreret, tamen distinguantur probant velit commodo. Culpa excepteur praesentibus ita officia aute cillum in esse, proident minim proident ex aliquip magna nisi quamquam lorem. In quo dolore ullamco ut sed ipsum ullamco occaecat sed magna cohaerescant mentitum multos excepteur, incurreret sint incididunt. Veniam excepteur mentitum, voluptate duis amet pariatur velit do cernantur eu probant, tamen sed quo noster possumus non lorem quamquam do offendit iis anim admodum consectetur ne admodum iis multos nescius, ipsum ingeniis quo malis quorum. </p> </div> </div> </section> <section id="two-b"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="text-center">Heading Two B</h2> <p>Anim ubi possumus ne quid. Deserunt malis possumus e duis deserunt ubi aliqua fugiat. An amet admodum hic te summis possumus, ab veniam praesentibus e mandaremus ita consequat, o magna laborum officia, cernantur do legam pariatur, do se quem sunt noster, incurreret minim laboris. Ab anim nescius vidisse aut enim commodo distinguantur an senserit e legam, ullamco ab sint mandaremus. Summis laboris exquisitaque de illum possumus relinqueret, lorem cupidatat o eiusmod, dolor ut laborum ea veniam, ex aut praesentibus ubi multos consequat transferrem, eiusmod nulla qui arbitror voluptatibus, iis lorem sint ut mentitum. Malis ullamco sed arbitror, ita labore mentitum, vidisse malis cillum nostrud fore, ingeniis elit mentitum. Ita veniam esse multos voluptate, cupidatat nisi eiusmod est laboris sint varias iis enim in se minim legam nam pariatur. Do varias quid quis voluptate, o fore sed dolor, pariatur cillum non expetendis praetermissum, quo enim excepteur aliquip. Irure ullamco est quid quae. Ea consequat nam occaecat, ullamco enim iudicem incurreret qui ita quo fugiat illum quorum si fore nam quamquam hic duis ubi sed tamen eram quem iudicem se id magna distinguantur do anim ex iudicem, fugiat voluptate a pariatur. Officia te ingeniis aut id veniam ipsum sed nescius hic incurreret aute quamquam litteris, nulla nostrud transferrem, minim ne arbitror de cupidatat est magna deserunt, est ita quae nescius non malis quibusdam nam probant. Cillum cernantur a sint fore ab te eram non amet. Minim expetendis in tamen dolore. Illum ingeniis occaecat, quorum appellat ex praetermissum. Non legam voluptate, cillum nostrud cernantur ab cernantur an amet de iis nescius do incurreret. Id sint arbitror laborum o senserit ea dolore. Ex velit voluptatibus se quorum an ut cillum arbitror. Est fore nulla summis iudicem et amet ullamco a despicationes an si ex tamen fabulas de sed fugiat iudicem proident, possumus noster amet hic quem, ita ab labore offendit, possumus nisi ingeniis in quid nescius relinqueret. E dolor iis illum, quibusdam nulla culpa si aliqua hic quibusdam duis appellat aut fugiat tempor quo fidelissimae. Qui dolor fore ubi consequat. Excepteur ab arbitror, aute do laboris quo proident aliqua sint nam aliqua, varias officia laborum. Sint tempor e litteris, fore non eiusmod ea magna a qui velit doctrina, an si consectetur qui ut lorem tempor ne incurreret eu ingeniis, id fore quae te pariatur, hic lorem duis eu vidisse. Admodum irure duis eu nisi qui hic deserunt qui laborum do o in esse minim aliqua, summis ne arbitror. Multos ingeniis de iudicem, quem de deserunt. Quo si despicationes, enim nescius ab expetendis, mentitum aute aut consequat tractavissent qui tamen iudicem non senserit. Eu elit occaecat probant. Ita ullamco ab voluptate, duis hic ullamco, hic irure praetermissum, multos probant transferrem. Pariatur ita nescius, iudicem arbitrantur iis commodo hic quae arbitror a nisi esse do veniam hic ingeniis ne enim. Incididunt id fore, ex sed culpa officia, varias quibusdam ut culpa quid ne eiusmod se admodum, ex dolor mandaremus voluptatibus hic excepteur sunt proident an hic nisi eruditionem, de irure familiaritatem. </p> </div> </div> </section> </section> <section id="three"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="text-center">Three</h2> <p>Nescius amet irure proident culpa et incididunt eu appellat, expetendis in malis litteris e ullamco dolore legam ad esse iis ipsum expetendis est adipisicing et quamquam aut culpa deserunt te irure aliquip praetermissum, voluptate nam dolor. De summis enim nisi mandaremus, appellat ne multos excepteur, hic velit amet si litteris non eiusmod minim sunt arbitror enim, irure domesticarum senserit dolor incididunt in cernantur amet tamen ut cillum id do iis fidelissimae iis o ipsum senserit. Anim admodum qui quis veniam. Eu summis labore legam pariatur hic incididunt culpa nulla iudicem duis. O magna malis elit incurreret id ad do cillum mandaremus. In senserit o ingeniis ne nulla excepteur quo elit nisi, ubi doctrina sed admodum, duis proident comprehenderit. Consequat ne legam et velit aut doctrina te quis. Ab enim ut quis, quid non si quem litteris. Ab illum exercitation, excepteur summis laborum proident. Ab irure aut summis, et summis id labore. Se nisi iudicem. Sunt excepteur se sint aliqua. Qui ad quid sunt culpa. In multos quamquam possumus, sed ab relinqueret. Summis ne litteris id duis est doctrina ea nulla admodum ne ne esse possumus se malis cernantur et philosophari. E non distinguantur iis nostrud sint veniam cernantur anim. Ad multos consequat graviterque, si nisi ab quem si commodo dolor fugiat admodum cillum eu anim ab deserunt te anim, tempor ubi laboris ut ut cernantur sed commodo, sed ipsum incurreret commodo, quo lorem cillum qui possumus. Nescius non lorem te legam qui deserunt iis elit non irure offendit laboris do admodum do lorem. Consequat sed appellat a id quis laboris est minim pariatur est commodo, magna consequat nescius id minim nescius ab dolor labore hic sint ad ubi quid litteris se qui enim domesticarum et se tamen in amet. Ita cupidatat et mentitum non noster hic expetendis in eram ad quid deserunt se reprehenderit, quo est labore aliquip in esse e iudicem, deserunt quae de mandaremus coniunctione, pariatur culpa ad nostrud exercitation, aut malis quid id officia. In velit ad dolore in in est graviterque, proident veniam arbitror, ab e velit sint eram. Consequat esse fore ad duis, nostrud eram quis incurreret labore, mentitum de excepteur ad veniam litteris admodum ab commodo sint eu quibusdam familiaritatem, laboris hic anim ubi eram ea cupidatat ad ita fugiat velit labore quibusdam. Sunt litteris quo lorem noster qui fugiat arbitrantur appellat ipsum aliquip ita nisi instituendarum mandaremus tamen expetendis ubi litteris quis quorum an nisi si ita ex quorum quorum fore nam velit fabulas fidelissimae de ne lorem varias nam laboris, irure incididunt est aliqua minim. In vidisse si officia a ex litteris reprehenderit non culpa appellat concursionibus, dolor quamquam nostrud. Fore voluptate exercitation, aut id nisi cupidatat, ut quis in quorum ita est iis domesticarum. A nulla veniam dolore pariatur do non aute summis aut laborum. Eram ullamco ea ullamco et pariatur iis illum pariatur. Et magna mandaremus admodum, duis voluptate ubi ullamco. Arbitror irure velit litteris malis, et multos nam quorum, non tempor se doctrina, qui offendit sempiternum, nescius malis ullamco et arbitror aliqua consequat, incurreret ubi expetendis, ab velit a fugiat. Singulis noster ab mandaremus coniunctione ut noster ab vidisse, aliquip dolore aliquip incididunt, veniam aut occaecat quo esse, ullamco et esse, ad est fugiat excepteur est proident eu voluptate o officia minim tamen cernantur quem. Incurreret duis iudicem appellat ad est illum quamquam sempiternum, eu anim despicationes, laboris quem in nescius efflorescere. Magna o iudicem ubi sunt. Fabulas minim aliqua an aute, malis possumus ita laborum. Aliqua officia singulis, ut iis exercitation, occaecat tamen possumus, velit te ingeniis ab ut offendit fidelissimae, iis enim amet magna nescius et cernantur duis malis ingeniis eram id et iudicem consectetur. Te officia philosophari nam possumus velit quae excepteur nisi sed te sint relinqueret, mentitum voluptatibus ab possumus, irure consequat qui offendit, ex summis senserit ullamco, quamquam arbitrantur ubi pariatur, consequat quid aliquip. In dolore ingeniis ea fugiat et appellat. An pariatur ita senserit.</p> </div> </div> </section> <section id="four"> <div class="panel panel-default"> <div class="panel-body"> <h2 class="text-center">Four</h2> <p>Si irure litteris familiaritatem, cillum ea ullamco. Hic enim quis fugiat ullamco est incididunt exquisitaque ea possumus est est et illum incurreret, est cillum voluptate admodum. Quis excepteur o exquisitaque. Sed nulla culpa noster appellat aut est velit cohaerescant. Ea sed enim senserit, ita ex legam legam veniam, ab velit ingeniis philosophari non quo aliqua dolore id excepteur. Se dolore quis culpa possumus in magna proident doctrina an voluptate ut labore, nostrud illum aut arbitror consectetur. In offendit consectetur, te magna legam duis quamquam ex ab tamen imitarentur, quibusdam sint ab nescius tractavissent, velit nam excepteur ex labore, expetendis ab ingeniis ad o anim fabulas quibusdam, non magna excepteur. Quis appellat e philosophari ea voluptate consectetur nam cernantur ne in singulis sempiternum, quo quem laborum ad si e lorem consequat id non irure tempor, dolor probant eruditionem si admodum do elit quibusdam. Id quid officia, ab quae varias tamen deserunt. Duis est laboris et cillum possumus appellat. Ubi ipsum deserunt praesentibus, si minim fidelissimae. Malis voluptate pariatur. Sed offendit tractavissent, nam quem duis lorem doctrina, quibusdam qui anim in enim et litteris se quorum. In aute anim veniam officia. Tempor nisi laboris ita an id minim quorum labore. Offendit se arbitror an vidisse nisi illum ea veniam ad quorum aut si culpa aliquip, laboris sunt hic mandaremus consectetur. Et eram veniam velit laborum. Aut mandaremus de voluptate, dolor ex iis quae mandaremus qui aliquip de velit incurreret, doctrina coniunctione si arbitror. Ab incididunt fidelissimae, dolore ut mandaremus quo magna iis cillum reprehenderit aliquip aliqua quibusdam ex arbitror in dolor et nam non praetermissum te tamen appellat familiaritatem, nisi o fabulas a esse, excepteur de tamen occaecat. Eu aute distinguantur non qui labore firmissimum ita eu consequat qui voluptate, nescius aute amet ubi nulla, non e sint labore duis est do de elit irure veniam quo a varias illustriora, commodo sint a doctrina instituendarum. Ex cillum arbitrantur. Quem ut proident, pariatur dolor ut admodum transferrem. Legam id quibusdam te veniam. Quamquam legam illum ullamco enim, de ne lorem dolor veniam, culpa fabulas est quamquam, quo aliqua commodo, se quo fore noster dolore a irure expetendis qui expetendis id in ullamco ex incurreret nam a nescius qui doctrina. Vidisse noster senserit, tamen fabulas familiaritatem est te veniam senserit praesentibus, te eram sempiternum, cillum admodum ne ullamco, qui nisi fabulas doctrina aut ex amet eram esse possumus aut eu varias eram nam incididunt. Se quo tamen aliqua quem iis ea quem incurreret tractavissent. Consequat aliqua malis fabulas nulla non de anim nostrud mandaremus. Proident id offendit se offendit ut cillum tempor, ita sunt nescius officia, ipsum singulis ne adipisicing quo quis consequat ea velit malis, noster excepteur admodum, de irure possumus ea quis senserit admodum.</p> </div> </div> </section> </div> </div> </section> </body>
.side-nav { position: fixed; top: 5em; } .affix { top: 5em; width: 20.45em; } .affix-bottom { position: absolute; width: 20.45em; } @media (min-width: 1200px) { .affix-bottom { width: 20.45em; } } body { position: relative; } .side-nav .nav .active { font-weight: bold; } .nav .nav { display: none; } .nav .active .nav { display: block; } .nav .nav a { font-weight: normal; font-size: .85em; } .nav .nav span { margin: 0 5px 0 2px; } .nav .nav .active a, .nav .nav .active:hover a, .nav .nav .active:focus a { font-weight: bold; border-left: 5px solid black; } .nav .nav .active span, .nav .nav .active:hover span, .nav .nav .active:focus span { display: none; }
$('#nav').affix({ offset: { top: $('#nav').offset().top } }); $('#nav').affix({ offset: { bottom: ($('footer').outerHeight(true) + $('.application').outerHeight(true)) + 40 } });

Related: See More

Vue Now UI Dashboard PRO
Animated Vertical Bootstrap Carousel on Mouse scroll and Swipe
Vertical Affix Menu [CSS only]

Questions / Comments: