Interactive menu backdrop determined by div element

I am working on a website with a menu structured like the following:

 Home -- Work -- Pricing -- Contact Us -- About

This website uses a one-page layout and has enabled Scrollspy on Bootstrap. I need to make the active menu background dynamic depending on which section is currently in focus. For example, when the user scrolls down to the "About" section, the background color of the corresponding menu item should change as shown in the image.

The current CSS code controlling this behavior is:

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
      background-color: #080808;
      color: #FFFFFF;
}
csstwitter-bootstrap

Answer №1

Link to Fiddle

By utilizing Javascript and jQuery, we can attach event listeners to each navigation link that modify the background color of the navigation bar as needed:

$('nav > div.home').click(function () {
    $('nav').css('background', 'blue');
});

$('nav > div.work').click(function () {
    $('nav').css('background', 'red');
});

$('nav > div.pricing').click(function () {
    $('nav').css('background', 'green');
});

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 could be causing the incorrect styling of the <h1> tag and certain Bootstrap elements in my Vuejs project when I import Buefy?

In my webpack-simple Vue.js project, I am utilizing Bootstrap 4 and Buefy. However, upon importing Buefy as per the documentation, I noticed that my <tag does not resize the text correctly and the nav-bar in Bootstrap 4 is displaying the wrong width. T ...

javascripthtmlcssvue.jsbuefy

The submission button in Bootstrap 3 becomes disabled upon clicking, preventing the data from being successfully transferred to the database

Currently, I am in the process of developing a signup page using bootstrap. To validate my form, I have integrated the plugin. Despite all validations being successful, an issue arises when I attempt to submit the form - the submit button is disabled and ...

phpjqueryhtmltwitter-bootstrapjqbootstrapvalidation

CSS: Trouble with elements positioning

I am attempting to position two boxes on top of each other at the bottom of a different div. Here is the code I have: <div style = "height:400px;width:400px;border:1px solid #000;"> <div style = "position:relative;height:100px;width:100px;bor ...

htmlcss

How can I retrieve the background and border color of the focused HTML element after pressing the tab on a website?

I am seeking to automate the process of conducting website accessibility checks by analyzing the color contrast between the focused element (after pressing tab) and its border color. Strategy: Initially, I attempted to take screenshots of the entire web ...

htmlcssgoogle-chromemachine-learningcomputer-vision

Displaying a list within a circle that elegantly animates, and then, after two full rotations, magically morphs

Can icons be displayed in a circle and after 1,2 rotations, revert back to the list view? https://i.sstatic.net/p4Jxm.png If so, when it forms after 1,2 rotation, it should resemble a line. https://i.sstatic.net/uJW24.png In summary, looking for a CSS3 ...

jqueryhtmlcssanimation

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

javascriptjqueryhtmlcss

Style selector for dynamic drop-down menus

import React, { Component } from "react"; export default class FontChanger extends Component{ constructor(props){ super(props); this.state ={ selectedFont: "", currentFont: "", }; this.handleFon ...

javascripthtmlcssinline

Encountered an error loading resource: server returned a 404 status code while utilizing Angular framework and deploying via GitHub Pages

Currently facing an issue with my Angular website deployment on Github Pages, receiving a console error "Failed to load resource: the server responded with a status of 404 ()" at "home: 1". This error specifically seems to be related to the app.component ...

cssangulartypescriptdeploymentgithub-pages

Tips for adjusting the wrapper css rule of a Tabs component to left-align text in a vertical tab within Material-UI

Typically, when text is placed inside the wrapper, it is aligned in the center. Is there a way to adjust the wrapper rule in <span class="MuiTab-wrapper">Item One</span> so that the tab text is aligned to the left (similar to what w ...

cssreactjsmaterial-ui

Tips for decreasing Vuetify Grid column width on larger screens

I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet: <v-row justify="center" class="ma-0 pa-0"> ...

cssvue.jsvuejs2vuetify.jscss-grid

Creating a gap between two elements without using the space-between property

Currently working on creating a responsive menu, <div style={{ display: "flex", flexFlow: "row wrap" }}> {/* left side */} <div key="1">nav 1</div> <div key="2">n ...

htmlcssflexboxresponsive

Using media queries, one can adjust the positioning of elements in CSS

Can someone please help me? I'm struggling to change the position of a div from absolute to static when the page width reduces to 800px. The challenge is that I can't modify certain code because I am displaying a slideshow that maintains an aspec ...

htmlcssposition

Flex just can't seem to align correctly

I'm having trouble getting this to work properly. I am using React and styled components, but the justify/content alignment is not functioning as expected. The setup includes a div with flex properties, where the flex direction is set to column. With ...

cssreactjsflexboxstyled-components

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

On a dynamically loaded page via pjax (except in IE), there are several links at the bottom. Whenever one of these hyperlinks is clicked, the page scrolls to the top while still loading. Although I am okay with this behavior, I'm curious if it' ...

javascriptjqueryhtmlcsspjax

The Art of Div Switching: Unveiling the Strategies

I have a question regarding my website. I have been working on it for some time now, but I have encountered a challenge that I am struggling to overcome. After much consideration, I am unsure of the best approach to take. The issue at hand is that I have ...

javascriptcsshtmldom

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

cssangular

Prevent the left border from displaying on a link that wraps to a new line

Excuse me, I am facing an issue with a pipe separator in my subnav bar between links. The problem is that the first link on a new line retains the left-border that should be disabled. How can I prevent this border from appearing on the first link of a new ...

javascriptjqueryhtmlcss

What impact does utilizing CSS 3D Transforms have on search engine optimization (SEO)?

Google emphasizes the importance of not hiding content, as it may not be counted by search engines. However, Google Cache has shown some discrepancies in understanding certain elements correctly. It's possible that what Google perceives as hidden migh ...

css3dseotransformgooglebot

What is the method for retrieving the font size of elements in the native view using appium?

Can the font size of text in the native view be retrieved using appium? I am aware of using driver.findElement(By.id("by-id")).getCssValue("font-size"); for web views. Is there a similar method for native views? ...

javacssseleniumappium

Ways to maximize the amount of content contained within a box

My current struggle involves meeting the requirements of my customers. I have a small box (230px x 200px) with an image that will display a list on hover. However, the customer now wants more items in the list than can fit in the box. Scrolling within the ...

javascriptjqueryhtmlcss