• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

nav bar to page section

Community Beginner ,
Jan 24, 2019 Jan 24, 2019

Copy link to clipboard

Copied

I'm not sure if i am describing this correctly.

I want the nav bar to;

1. stay on the page as you scroll down (which i think i can find out how to)

2. have it so when clicked, the page scrolls down to a different section on the current page.

Dreamweaver / bootstrap4

Views

362

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Jan 24, 2019 Jan 24, 2019

1. https://getbootstrap.com/docs/4.1/utilities/position/#sticky-top    Follow those instructions about fixed top items to keep the nav up top. Here's an example of it together - https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/​

2. This is just a simple anchor link. Nothing special for bootstrap - HTML a name Attribute 

Votes

Translate

Translate
Community Expert ,
Jan 24, 2019 Jan 24, 2019

Copy link to clipboard

Copied

1. https://getbootstrap.com/docs/4.1/utilities/position/#sticky-top    Follow those instructions about fixed top items to keep the nav up top. Here's an example of it together - https://getbootstrap.com/docs/4.0/examples/navbar-top-fixed/​

2. This is just a simple anchor link. Nothing special for bootstrap - HTML a name Attribute 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 24, 2019 Jan 24, 2019

Copy link to clipboard

Copied

Bootstrap has an opton called scrollspy:

Tryit Editor v3.6

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 24, 2019 Jan 24, 2019

Copy link to clipboard

Copied

LATEST

Named Anchors are deprecated.  There's no telling how long browsers will keep supporting them.   I prefer to use unique IDs instead.

<a href="#section1">Link on same page - section 1</a>

<a href="#section2">Link on same page - section 2</a>

<section id="section1">

This is section 1

</section>

<section id="section2">

This is section 2

</section>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines