Highlighted

nav bar to page section

Community Beginner ,
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

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

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 

TOPICS
Learn Dreamweaver

Views

258

Likes

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

nav bar to page section

Community Beginner ,
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

Adobe Community Professional
Correct answer by Ben M | Adobe Community Professional

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 

TOPICS
Learn Dreamweaver

Views

259

Likes

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
Jan 24, 2019 0
Adobe Community Professional ,
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 

Likes

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
Reply
Loading...
Jan 24, 2019 1
LEGEND ,
Jan 24, 2019

Copy link to clipboard

Copied

Bootstrap has an opton called scrollspy:

Tryit Editor v3.6

Likes

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
Reply
Loading...
Jan 24, 2019 2
Adobe Community Professional ,
Jan 24, 2019

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Jan 24, 2019 0