How to navigate within the same page

Code Feedback
1

Can anybody guide me in this problem. I want to create a navigation bar to scroll in the same page.

I’ve found out this https://startbootstrap.com/template-categories/all/ which provides templates and themes for bootstrap, But I don’t know how to use them in my doc file.

Also It would be better if you could tell me both-

  1. How to add these themes in my file.
  2. How to create a same page nav page bar from scratch.
2

Hey, you will have to use an “a” tag like this:

<a href="#IDofYourDivYouWantToGoTo">Click here to go to this div!</a>

And of course you need a div:

<div id="IDofYourDivYouWantToGoTo"></div>

To use one of the templates:

  • Download the files
  • Unzip
  • Edit the index.html file however you like
  • Add a new css file for any css you want to add
  • Add a new js file for any js you want to add
1 Like
3

Smooth scroll?


U have there also reference url for decsription, and also updating on this snippet

Edit: also maybe u want spy scrollnto indicate on what section u are
http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp

1 Like
4

Regarding templates-
I did first 2 steps.
I have also viewed the index file. I can change the content.
But How to add this downloaded template into my personal html css document?

5

You can’t do that easily. It is basically a whole project on its own. So you will have to copy your html to the index.html file. Or the other way round, but since their html/css/js is more complicated it is easier to copy yours to theirs.

6

Okay Thanks :slight_smile:

7

BTW: you can (easily) use them on Codepen.

8

How? Can you tell me please.

9
  • Copy the content of index.html to the html section
  • Same for CSS and JS
  • In Setting, include CSS: Bootstrap, JS: jQuery and Bootstrap
  • In html section remove link to bootstrap.min.css and to the standard css file (css/----.css)
  • At the bottom of the html section remove script link to jquery and the link to bootstrap.
  • Also remove link to the standard js file (js/—.js)
  • Then have a look at the other javascript files that are linked. If they are local (no http://) find an online version online.
  • If you have a list of those links, remove all the script links in the index section and add the list of links in the Settings

Hope that works for you. I just download one template, so it is possible that yours look slightly (or completely) different. Send the link to the template, if you can’t figure it out.