"Navigate with Ease: Introducing the Twitter Bootstrap Scroll

Having trouble with the twitter bootstrap scroll spy feature as the navigation doesn't update until midway through scrolling and skips item 4 to reach the last item. Check out this example: http://jsfiddle.net/eoboite/kjvAa/38/

What am I doing wrong? Help, please.

Here's the HTML:

<body data-spy="scroll">
    <div class="header">
        <div class="center-container"></div>
    </div>
    <div class="nav-container">
        <div class="center-container">
            <ul class="nav main-nav" id="nav-bar">
                <li class="active"><a href="#item1">Item 1</a>

                </li>
                <li><a href="#item2">Item 2</a>

                </li>
                <li><a href="#item3">Item 3</a>

                </li>
                <li><a href="#item4">Item 4</a>

                </li>
                <li><a href="#item5">Item 5</a>

                </li>
            </ul>
        </div>
    </div>
    <div>
        <div class="sectional add-room" id="item1">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 1</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item1-->
        <hr />
        <div class="sectional add-room" id="item2">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 2</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item2-->
        <hr />
        <div class="sectional add-room" id="item3">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 3</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item3-->
        <hr />
        <div class="sectional add-room" id="item4">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 4</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item14-->
        <hr />
        <div class="sectional add-room" id="item5">
            <div class="inner-wrapper">
                <div class="center-container">
                     <h1>Item 5</h1>

                    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
            </div>
        </div>
        <!-- end item5-->
        <!--Include js-->
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.min.js"></script>
        <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
        <script>
            console.log('starting scroll spy');
            $('.nav-container').affix({
                off: {
                    top: 100
                },
            });
            console.log('done');
        </script>
</body>

Here's the custom CSS:

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');
 .center-container {
    margin:0 auto;
    width: 960px;
    border:1px solid red;
    overflow:hidden;
}
.header {
    background:red;
    padding: 30px 50px;
    overflow:hidden;
}
.nav-container {
    background: #0e1317;
    overflow:hidden;
    left:0;
    margin-bottom:0;
    right:0;
    z-index:1030;
}
.active {
    background:#075f81;
}
.nav-container.affix {
    top: 0;
    position:fixed;
}
ul.main-nav {
    width: 960px;
}
ul.main-nav li {
    float: left;
}
.main-nav > li > a {
    color: #fff;
    display:block;
    padding: 25px 15px;
    text-decoration:none;
}
.main-nav > li > a:hover {
    text-decoration:underline;
}
.inner-wrapper {
    padding:50px 20px;
}

Answer №1

Within the source code of the Bootstrap site, there is a helpful snippet:

/* Simple solution to prevent navbar overlap */
h1[id] {
  padding-top: 80px;
  margin-top: -45px;
}

While the main headers were functioning correctly, the subnavs were only activating when scrolled in the sidenav, which was located behind my fixed header nav.

To resolve this issue, I implemented the following:

h3[id] {
  padding-top: 80px;
  margin-top: -80px;
}

This adjustment was made to each of the subnav section headings, resulting in a successful fix.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to dynamically change the color of my component depending on the prop passed to it?

I am facing an issue with the color of my component changing based on the value of the prop 'level'. Despite using states to set the backgroundColor, all components end up having the same color due to the state being altered for every comment. I ...

The HTML 5 video is not functioning properly on an iPad, and the layout of the iPad has black areas on the sides

Having some trouble with an HTML 5 project where the video plays on Chrome and Safari PC browsers but not on iPad. The task at hand is to get it working in portrait mode only, with the video playing when tapped/clicked. <!doctype html> <!--[if ...

What is the process for adding color to HTML elements?

Is there a way to assign unique random colors to each individual p tag in ReactJS? function App() { return ( <div> <p style={{ color: "#7fbd73" }}>Hi</p> <p style={{ color: "#3a82e4" }}>Hello</p> < ...

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

Adjust the background color of the container when transitioning to a new slide in a Slick carousel

I am using a Slick slider where each slide has its own background color. The container color is set to white, but I want the container color to change instantly to match the color of the currently active slide when swiping or changing slides. This is my J ...

Conquering challenges arising from organizing subdirectories for js/css/xml files

During the process of developing a website with html, css, js and xml files stored on my computer (not yet online), I initially kept all the files in one folder along with an images folder. However, as the project progressed and things started to get mes ...

React Component: Issue with toggle functionality in child component not meeting expectations

I'm currently working on a checkbox user interface, where I need to pass a toggle function down to a list component. The issue I'm facing is that while I can check the checkbox successfully, I'm unable to uncheck it for some reason. Below i ...

Troubleshoot: Dropdown menu in Materialize not functioning (menu fails to drop down

I am currently incorporating Materialize to create a dropdown button in my navigation bar. However, I am facing an issue where nothing happens when the button is clicked. Here is a snippet of my code: <head> <meta charset="UTF-8"> <!-- ...

Is it necessary to install only form control styles from Bootstrap 4?

Does Bootstrap 4 offer a way to only install the form control styles like input group? I came across a resource that allows you to solely install the Bootstrap 4 Grid. Is there anything similar for downloading just the form styles? ...

Locating the position of multiple repeated words

My question involves a complex laTeX string: let result = "\\frac{x}{2}+\\frac{3}{x}"; The task at hand is to locate the instances of "frac" in the string, store their positions in an array, find the first '}&a ...

Applying position: absolute in HTML/CSS to lock parent and child elements in

Transform the boxes into concentric circles (circles within each other that share the same center). The outer circle should be black with a size of 300px and the inner circle should be white with a size of 200px. html: <div id="p10"> <div id ...

Next.js Page is failing to render React component props

I am currently facing an issue where I need to display data from the props object in a functional component using React. The component structure looks like this: interface TagsComponentProps { tags: Tag[]; } const TagsComponent: FC<TagsComponentPro ...

How can the onclick attribute be modified in an HTML document?

I am looking to update the data-pro-bar-percent attribute of a progress bar from 80 to 100 when a specific link is clicked. The change in attribute needs to be as follows: data-pro-bar-percent="80" --> data-pro-bar-percent="100" This is the current HT ...

Once invoked by an ajax request, the $().ready function is executed

The functionality of this code is flawless when running on its own. However, once I make an ajax call to it, the code fails to execute. I suspect that the issue lies within $().ready, but I haven't yet identified a suitable replacement. Any suggestio ...

Collecting all the <td> elements within a single row

I am having trouble creating a table dynamically using JSON data. The issue is that all <td> elements are being placed in the same <tr> instead of two separate rows. Here is my JavaScript code: $('button').click(function() { var str ...

Arranging based on attribute data

I'm currently working on organizing a collection of divs that have unique custom data attributes which I aim to sort based on user selection. For instance, if 'followers' is chosen, the .box elements will be arranged according to their data- ...

Bring in LOCAL .obj for loading with Three.js OBJLoader in a React environment

Attempting to import a local .obj file using the THREE.OBJLoader().load() function is causing issues. While it successfully loads non-local URLs such as '', loading the local file takes a long time due to downloading it every time. The setup inv ...

Connection lost from JS client in Twilio's Programmable Chat

My React application utilizes the Twilio Programmable Chat library for chat functionality. The setup code typically appears as follows, enclosed within a try/catch block: this.accessManager = new AccessManager(twilioToken.token); const chatClientOptio ...

Deliver a response to recipients through the "button" feature within the WhatsApp cloud API

I'm working on building a chatbot for my booking company. Here is an outline of my initial bot flow: const axios = require("axios").default; function initialize_bot(message, phone_number, access_token, sender, username) { if (message === ...

Is it possible for PHP to not provide an image to HTML?

I'm currently facing an issue trying to display an image in HTML using a PHP script. Despite my best efforts, it's not functioning as expected :-( Here is the code snippet from my image.php script: <? $_GET['f'] = 'all_thre ...