startbootstrap/startbootstrap-scrolling-nav

An unstyled Bootstrap HTML template for creating smooth scrolling, one page websites - created by Start Bootstrap

Start Bootstrap - Scrolling Nav

Scrolling Nav is an unstyled one page starter template with a collapsing, smooth scrolling navigation bar for Bootstrap created by Start Bootstrap.

Preview

View Live Preview

Status

Download and Installation

To begin using this template, choose one of the following options to get started:

• Download the latest release on Start Bootstrap
• Install via npm: npm i startbootstrap-scrolling-nav
• Clone the repo: git clone https://github.com/StartBootstrap/startbootstrap-scrolling-nav.git
• Fork, Clone, or Download on GitHub

Usage

Basic Usage

After downloading, simply edit the HTML and CSS files included with dist directory. These are the only files you need to worry about, you can ignore everything else! To preview the changes you make to the code, you can open the index.html file in your web browser.

Advanced Usage

Clone the source files of the theme and navigate into the theme's root directory. Run npm install and then run npm start which will open up a preview of the template in your default browser, watch for changes to core template files, and live reload the browser when changes are saved. You can view the package.json file to see which scripts are included.

npm Scripts

• npm run build builds the project - this builds assets, HTML, JS, and CSS into dist
• npm run build:assets copies the files in the src/assets/ directory into dist
• npm run build:pug compiles the Pug located in the src/pug/ directory into dist
• npm run build:scripts brings the src/js/scripts.js file into dist
• npm run build:scss compiles the SCSS files located in the src/scss/ directory into dist
• npm run clean deletes the dist directory to prepare for rebuilding the project
• npm run start:debug runs the project in debug mode
• npm start or npm run start runs the project, launches a live preview in your default browser, and watches for changes made to files in src

You must have npm installed in order to use this build environment.

Bugs and Issues

Have a bug or an issue with this template? Open a new issue here on GitHub or leave a comment on the template overview page at Start Bootstrap.

About

Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

• https://startbootstrap.com
• https://twitter.com/SBootstrap

Start Bootstrap was created by and is maintained by David Miller.

• https://davidmiller.io
• https://twitter.com/davidmillerhere
• https://github.com/davidtmiller

Start Bootstrap is based on the Bootstrap framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright 2013-2023 Start Bootstrap LLC. Code released under the MIT license.

startbootstrap-scrolling-nav's Issues

How to stop the scrolling

Hi,
How can I stop the scrolling in a specific page? (that only the current page will appear after I click on the link of the page from menu)

Dark Mode toggle

There should be a dark mode toggle button on top right corner

Where is the vendor/scss folder?

Going back

This is a feature request. Could you allow users to hit the back button to get back to where they started?

Date has gone past in the License and the README

The date has been outdated in the License and in the README as well. I am adding a PR correcting those. Please check that out.

100% height of section using bootstrap 4

I cannot get the 100% height to work in a section, this worked brilliantly using the previous version of bootstrap but I cannot get the 1005 height to be the height of the browser window.

Scrolling not in a good section

Hi,

First all, I'm really happy to use your demo ! Very nice.

But I have a problem, when I go to "Services" the hightlighting item is "About" yet.
How to solve the problem ?

Thank you very much

Michemiche

package-lock.json

hapijs / hoek suggested update to hoek ~> 4.2.1

Any plans on making this adjustment? I'm not a heavy developer and was hoping to not have to deep dive on this. Let me know!

Section Heights

Set the heights of the example sections to min-height: 100% rather than 100% to make the template sections more usable out of the box.

scrolling not working

Smooth scrolling not working

Active State Is Off

Need help!

I like this navbar and have been adding galleries and content to the template sections, but suddenly my active state is off by one. Section two indicates you're on section one, section three indicates section two, etc.

What happened?

Does the height of each section cause this problem?

Thanks!

Mobile: Various Issues

Usually issues should have separate tickets, but all of these issues are likely in the same scope. Will create separate issues if requested to do so.

Using iPhone 6S with latest OS.

1. Hamburger Button fails to change to 'not selected' state

Steps to recreate issue:

1. Click hamburger button
2. Click hamburger button again and see that button stays "selected"

Note: If you select one of the sections from the drop-down menu, the hamburger button becomes "unselected".

2. Drop-down menu fails to hide after selecting section

Steps to recreate issue:

1. Click hamburger button
2. Select 'About', 'Services', or 'Contact'

3. 'Logo' stays highlighted unless another is selected

Steps to recreate issue:

1. Select 'Start Bootstrap'
2. Slide vertically to new section

Alternatively...

1. Select hamburger button
2. Select logo
3. Do anything except tap another item

I'd 3 is super tertiary, but the first two aspects of this issue are problematic.

MVC 5 ASP.net

Hi

Is it working with MVC 5 asp.net?

startbootstrap-scrolling-nav is in my package.json - not working

I have run npm install it is still not working, please help I have Jquery running and no errors

Flickering after click to #page-top when page's top

Whan you are on the top of the page and click to link with href="#page-top" and then scroll, the page jumps few scrolls around top position. After that scolling start correctly.

Edit: This problem occurs on the top of every position. So when you are on the #intro for example and click to href="#intro" and try to scroll, the page is not scrolling for some firsts wheel scrolls.

issue with active tab

The active tab works fine it changes to its respective section but during the transition it jitters it becomes active and hidden during the transition which causes it to flicker can you help me with this issue thanks

sections overlap on cell phone

When the sections have nontrivial content, their contents seem to overlap on my iphone 7. Is there an easy solution in bootstrap? Thank you

The menu item not loosing focus after scroll

When you click on any menu item and then scroll, the focused item is still the clicked. Maybe would be better to loose the focus from menu item after scroll.

Change active state if the page is 50px from top

I am trying to stop the div when it reaches 50px from the top. It works while I made the change on scrollTop: $($anchor.attr('href')).offset().top - 50 but the active state on navigation doesn't change. It only change if I scroll that 50px too. Please help.

Use spacing utilities instead of pixel padding

If you use the Bootstrap 4 spacing utilities (py-5, pb-5 etc.) on the sections and the header, there will be no need for a separate custom CSS file, making this a pure Bootstrap 4 template.

Example:

<section id="about" class="py-5">
    ...
</section>

It appears to be a bit tricky with the header, however. The spacing provided by py-5 isn't enough, so it'll need to be applied to both header and the container div inside it. And then a few more...

<header class="bg-primary text-white py-5">
    <div class="container text-center py-5">
      <h1 class="pt-5">Welcome to Scrolling Nav</h1>
      <p class="lead pb-4">A landing page template freshly redesigned for Bootstrap 4</p>
    </div>
</header>

This could take a bit more utility classes to make it look fine on smaller screens, but in the end, the removal of custom CSS is worth it.

Active class

active class not work for me. it is not adding active class

How to change navbar background color..?

This is perfect and I am using it in my project.

But I need to change the navbar background color to different one. How can I do it in a good way using this..?

second link clicked 1st gets shown as active

When I click on my first menu link it doesn't show as being active but when I click on my second menu link the first shows as active, can anyone help please?

Missing the Issue Templates

The project is currently missing the issue templates. If you would like to add them, then I can add a PR including some relevant issue templates. Please let me know what do you think about this.