Bootstrap scrollspy vertical menu Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 49 of bootstrap - oh yeah
in part 47 of this video series we
discussed using the bootstrap scroll spy
plugin with a horizontal navigation menu
in this video well discuss using it with
a vertical navigation menu so here is
what we want to achieve notice we have
the navigation menu on the left and the
images on the right as we scroll up and
down these images we want the respective
links within the navigation menu to be
highlighted automatically if you notice
both the navigation menu and the images
are present in the same row so we are
going to create a row with two columns
the first column is going to be three
units wide
within which we will have of a
navigation menu and the second column is
going to be nine units wide within which
we'll have all our images so let's flip
to vision studio this is the same
example that we worked with in our
previous video at the moment what we've
got is a horizontal navigation menu so
first let's go ahead and create a
container to create a container we
create a development with class
container inside this container let's
create a row to create a row we create a
development with class row inside this
row we are going to create two columns
the first column is going to be three
units wide so I'm going to use call X s3
class and the second column is going to
be nine units wide so let's use call X's
nine class three plus nine is 12 the
number of columns on which the bootstrap
grid system is based so within this
column which is three units wide we are
going to have our navigation menu and we
already have the HTML for the navigation
menu so I'm going to cut this HTML from
here and place it inside this column
which is three units wide and then we
want our images within the column that
is nine units wide so let's cut all
these developments that contain our
images and then place them inside the
column which is nine units wide we don't
need this container anymore so let's go
ahead and delete the container at this
point let's save our changes
and when we reload this page we don't
get what we expect we want this
navigation menu to be a vertical
navigation menu so we have to make some
modifications to the navigation menu
HTML that we have here first of all we
don't need these three classes so I'm
going to delete them from the nav
element I'm going to leave the ID there
because we need that in just a bit we
don't need this development anymore so
I'm going to delete that we don't need
this development either so let's delete
that as well and we don't need this
development also so let's delete that as
well let's remove these white spaces
here and let's also delete the
corresponding closing developments let's
format this HTML a bit now if you notice
what we've got here these are actually
navigation pills to get these navigation
pills we are going to use two classes
nav and nav bills so we already have the
nav class here on the unordered list and
let's also use nav pills class and if
you look at these navigation pills they
are stacked on top of each other so to
get them stacked on top of each other
let's use nav stacked class as well
let's see what changes reload of a web
page notice now we have of a navigation
menu on the left and look at this as we
scroll down the navigation menu is also
scrolling up we don't want that to
happen we want the navigation menu to be
fixed and also notice if got you know
extra space here at the top and that's
because we're using a custom class on
our image div elements which is this
style and if you look at this class
we're actually adding 40 pixels padding
at the top so we don't need that padding
anymore so what I'm going to do is
delete you know the class from all the
image developments let's do that
all right so let's go ahead and reload
our page now notice we don't have that
extra space and we want the position of
this navigation menu to be fixed at the
top you know 20 pixels from the top
basically to achieve that we already
have an ID for our navigation menu and
the ID is main nav bar so within our
Style section let's use the ID main nav
bar and we want its position to be fixed
20 pixels from top so I'm going to set
position to fixed and we want to be
fixed at 20 pixels from the top so let's
save our changes reload of a webpage now
notice the position is fixed at the top
and as we scroll look at that the
respective links within the nav bar are
highlighted as expected
now we have the navigation menu on the
left hand side if you want it on the
right hand side then all you have to do
is move this HTML basically move this
column which is three units wide after
the column which is nine units wide so
when we reload this now we have the
navigation menu on the right-hand side
and it should still continue to work
exactly the same way as before thank you
for listening and have a great day