issues encountered when attempting to modify the background color of navigation items using bootstrap

Presently, I am focusing on enhancing the navigation bar of my website, but I have encountered an issue with my JavaScript code. I have implemented a scroll-spy feature in my navigation and added JavaScript for smooth scrolling. Additionally, I aim to make the background color of the nav-items(links) change as users scroll to different sections of the website. Although I have created what seems like appropriate code for this functionality, it fails to work - it simply does not respond.

scroll_navbar {
 position: fixed;
 width: 14%;
 height: 100vh;
 z-index: 3;
 padding: 0;
 padding-left: 1%;
}
.nav-item {
 background-color: rgba(255,255,255,0.6)!important;
 margin: 6px;
 transition: 0.7s all;
}
.nav-item :hover {
 background-color: rgba(255,255,255,1)!important;
 color: rgb(0,0,0);
}
body {
 position: relative;
}
.active {
 background-color: rgba(255,255,255,1)!important;
}

.nav-link {
 color: #000000;
}
.nav-item.scrolled {
 background-color: rgba(249,71,108,0.6)!important;
 margin: 6px;
 transition: 0.7s all;
}
.nav-item .scrolled :hover {
 background-color: rgba(249,71,108,1) !important;
 color: rgb(0,0,0);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container d-flex align-items-center" id="scroll_navbar">
    <div class="row">
        <div class="col" style="padding: 0;">
            <div id="spy">
                <ul class="nav flex-column">
                    <li class="nav-item"><a href="#part1" class="nav-link">home</a></li>
                    <li class="nav-item"><a href="#part2" class="nav-link">about</a></li>
                    <li class="nav-item"><a href="#part3" class="nav-link">price</a></li>
                    <li class="nav-item"><a href="#part4" class="nav-link">contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>


<script>
 $(function () {
   $(window).scroll(function () {
     var $nav = $('.nav-item');
     $nav.toggleClass('scrolled', $(this).scrollTop() > 
     $nav.height());
  });
 });
</script>
<script> $('body').scrollspy({ target: '#spy'}) </script>
<script src="smooth-scroll.js"></script>
<script>
  var scroll = new SmoothScroll('a[href*="#"]');
</script>

Is there a more effective solution you can suggest to alter the background color of my links (nav-item)?

javascripthtmlcss

Answer №1

I believe your question could use some clarification. You seem to have missed adding the link tag in the CSS code for `.nav-item a`. It's a simple fix, take a look at it. 

scroll_navbar {
 position: fixed;
 width: 14%;
 height: 100vh;
 z-index: 3;
 padding: 0;
 padding-left: 1%;
}

.nav-item a {
 color:white;
 background-color: grey!important;
 margin: 6px;
 transition: 0.7s all;
}
.nav-item :hover {
 background-color: rgba(255,255,255,1)!important;
 color: rgb(0,0,0);
}
body {
 position: relative;
}
.active {
 background-color: rgba(255,255,255,1)!important;
}

.nav-link {
 color: #000000;
}
.nav-item.scrolled {
 background-color: rgba(249,71,108,0.6)!important;
 margin: 6px;
 transition: 0.7s all;
}
.nav-item .scrolled :hover {
 background-color: rgba(249,71,108,1) !important;
 color: rgb(0,0,0);
}
<div class="container d-flex align-items-center" id="scroll_navbar">
<div class="row">
    <div class="col" style="padding: 0;">
        <div id="spy">
            <ul class="nav flex-column">
                <li class="nav-item"><a href="#part1" class="nav-link">home</a></li>
                <li class="nav-item"><a href="#part2" class="nav-link">about</a></li>
                <li class="nav-item"><a href="#part3" class="nav-link">price</a></li>
                <li class="nav-item"><a href="#part4" class="nav-link">contact</a></li>
            </ul>
        </div>
    </div>
</div>

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

Two dynamic divs positioned next to a div with a set size

I am struggling with the layout of placing two fluid divs next to one that has a fixed size. Let me show you a picture to better illustrate my issue: #menu has a fixed width; #owl takes up 60% of the wrapper; #right menu takes up 40% of the wrapper. Fo ...

htmlcssresponsive-design

Verify whether a variable is empty or not, within the sequence flows in Camunda Modeler

When working with a sequenceFlow in a process instance, I need to check a condition that may involve a variable that has not been defined yet. I want the flow to proceed even if the variable is not defined, rather than throwing an ActivitiException. I hav ...

javascriptbpmncamundacamunda-modelerjuel

Determine the active animation on an element using jQuery or JavaScript

Can you provide the code for the know_anim() function that can determine which animation is currently running on the '#div' element? Check out the jsFiddle link for reference:https://jsfiddle.net/himavicii/bL0nsjeL/ function moveLeft() ...

javascriptjquery

Converting the given data into an object in JavaScript: a step-by-step guide

"[{'id': 3, 'Name': 'ABC', 'price': [955, 1032, 998, 941, 915, 952, 899]}, {'id': 4, 'Name': 'XYZ', 'id': [1016, 1015, 1014, 915, 1023, 1012, 998, 907, 952, 945, 1013, 105 ...

javascriptpythonjquerypython-3.xjavascript-objects

Extracting Data from JSON Structures

I am struggling with extracting data from a JSON string that looks like this: var txt= '{“group”: [ {“family1”: { “firstname”:”child1”, “secondname”:”chlid2” }}, {“family2”: { ...

javascriptjson

When attempting to access injected services from the effect(), they appear to be empty

Upon receiving a notification, represented as a signal object, I utilize a facade service that not only returns the object but also includes a variety of methods. When new data is received, I analyze within the constructor using an effect whether the noti ...

javascriptangularangular-signals

Unable to Get Basic jQuery .load Example to Function

Seeking assistance with a jQuery issue regarding loading HTML snippets into a page. When the snippet contains just HTML, it loads fine. However, when it includes a script, there seems to be an issue. Simplified code provided below for better understandin ...

javascriptjquery

Capturing images on Android devices through the camera option using HTML input file type

Having an issue with an LG G2 Android device running version 4.4.2 and the default browser. I'm currently using this tag to allow users to upload images from their devices to the server: {<input type="file" accept="image/*;” />} When I clic ...

androidhtmlbrowserinput

I encountered an issue while working with Material-UI and Mobx. The error message reads: "Material-UI: capitalize(string) function requires a string argument

enter code hereI encountered this issue when I copied a React component from and the state of this component is managed by Mobx as shown below: @observable snackbarState = { open: false, vertical: null, horizontal: null, }; @action toggle ...

javascriptreactjsmaterial-uimobxmobx-react

Is there a way to create a universal getter/setter for TypeScript classes?

One feature I understand is setting getters and setters for individual properties. export class Person { private _name: string; set name(value) { this._name = value; } get name() { return this._name; } } Is there a w ...

javascriptooptypescriptecmascript-6getter-setter

Understanding the Process of Accessing Array Values in Immutable.js

I'm feeling a little puzzled and struggling to figure this out. Let's say I have the following code: const AnObj = Immutable.Map({ a : "a", b : Immutable.List.of( a, b, c, Immutable.Map({ a : "a" }) ) }); When working with Immu ...

javascriptarraysobjectdictionaryimmutable.js

Landing page experiencing issues with client-side setTimeout functionality

Good Afternoon, I am currently working on implementing a loading animation for the pages on my website. However, I am facing an issue with the client-side setTimeout function not functioning as expected. Interestingly, the same function works perfectly on ...

javascripthtmljquerynode.jssettimeout

Required attributes not found for data type in TypeScript

When the following code snippet is executed: @Mutation remove_bought_products(productsToBeRemoved: Array<I.Product>) { const tmpProductsInVendingMachine: Array<I.Product> = Object.values(this.productsInVendingMachine); const reducedPro ...

javascriptarraystypescriptvue.jstypes

jquery animation does not reset after event occurs

My script is functioning well to animate my elements, but I am facing an issue where when the function is called again after a timer, the elements move to their correct positions but do not initiate a new animation. The goal of the function updateFlights( ...

javascriptjqueryajaxjquery-animate

Exploring Twitch API and React to visualize and display comments on a map

I am encountering an issue with mapping comments/results from a Twitch API. I am receiving a TypeError when attempting to map, and the API results are limited to 60 records with no apparent way to extend the mapping beyond that. This is the Component resp ...

javascriptarraysreactjstwitchtwitch-api

What causes Vue to only update once when there are two closely timed mutations to reactive data?

Can you take a look at this simple example? export default { data() { return { name: "Amy", age: 18, }; }, computed: { combinedDataForWatching() { return { name: this.name, age: this.age, ...

javascriptvue.jsvuejs2vue-componentvue-reactivity

Enhancing bar border with the addition of a separator

Our current situation is similar to this: https://i.stack.imgur.com/Luj1S.png but our goal is to have a chart with separators on both sides of the age brackets, like this: https://i.stack.imgur.com/03UpO.png In order to achieve this, we have utilized t ...

jqueryhtmlcss

Manage and modify Firestore data and Firebase storage in an asynchronous manner

I've implemented a crud system for data storage that includes images. This system consists of fields for name, type, qty, description, and url. The url field is used to store the URL of an image that has previously been uploaded. Below is the code fo ...

javascriptreactjsfirebasenext.js

Tips on extracting values from HTML utilizing a CSS selector in instances where only class and style attributes are present. The class in question is generic and may be utilized elsewhere as well

''' 29/11/2021 ''' I have a code snippet that retrieves dates from a table on a webpage, but it also fetches other values along with the date. I am looking for a way to extract just the d ...

javahtmlseleniumweb-scraping

Understanding the response from an AJAX call

VB code Dim temp3 As String = dt.ToString() cmd.Connection = con con.Open() i = cmd.ExecuteNonQuery() con.Close() If i = 1 Then msg = "Record successfully inserted" ...

javascriptc#jqueryasp.netajax