Shrinking Navigation Menu - Changing Font Color

Question

Shrinking Navigation Menu - Changing Font Color

I'm attempting to update the menu text color when the header shrinks on scroll.

I've experimented with this code:

$(window).scroll(function() {
  if ($(document).scrollTop() > 20) {
    $('ul.art-hmenu>li>a').addClass('shrinkmenufont');
  } else {
    $('ul.art-hmenu>li>a').removeClass('shrinkmenufont');
  }
});

using:

.shrinkmenufont {
  font-color: black;
}

The function runs, but the font color stays white and doesn't switch to black as intended when scrolling down.

Any advice would be greatly appreciated.

Thank you!

Link:

Website

jquery css wordpress

Answer 1

Answer №1

There are a couple of issues to address here. Firstly, when it comes to changing text color in CSS, the correct property is simply color, not text-color. Secondly, the rule that specifies the color as orange is

ul.art-hmenu > li > a.active

, which has higher specificity compared to just .shrinkmenufont. To ensure that the text appears in black, you will need to make your rule more specific or place it after the orange rule. You can try this:

ul.art-hmenu > li > a.shrinkmenufont {
    color: 'black';
}

Answer 2

There are a couple of issues to address here. Firstly, when it comes to changing text color in CSS, the correct property is simply color, not text-color. Secondly, the rule that specifies the color as orange is

ul.art-hmenu > li > a.active

, which has higher specificity compared to just .shrinkmenufont. To ensure that the text appears in black, you will need to make your rule more specific or place it after the orange rule. You can try this:

ul.art-hmenu > li > a.shrinkmenufont {
    color: 'black';
}

Answer 3

Answer №2

Here is the simple CSS code to change the font color of the resized header:

The CSS code snippet is as follows:

.shrinknav a.shrinkmenufont {
  color: #000;
}

Answer 4

Here is the simple CSS code to change the font color of the resized header:

The CSS code snippet is as follows:

.shrinknav a.shrinkmenufont {
  color: #000;
}

Answer 5

Answer №3

$(window).on('scroll', function() {
   if ($(document).scrollTop() > 20) {
       $('ul.art-hmenu>li>a').css('color', 'black');
   } else {
       $('ul.art-hmenu>li>a').css('color', 'white');
   }
});

Answer 6

$(window).on('scroll', function() {
   if ($(document).scrollTop() > 20) {
       $('ul.art-hmenu>li>a').css('color', 'black');
   } else {
       $('ul.art-hmenu>li>a').css('color', 'white');
   }
});

Shrinking Navigation Menu - Changing Font Color

Answer №1

Answer №2

Answer №3

Similar questions

Determine the total value derived from adding two option values together

The div element is refusing to display the background image

Retrieving JSON data from an API

Creating a CSS triangle that expands the full width of the page

Introducing a unique prefix to distinguish between two distinct product categories

Run a Python function in Django without any feedback

Enhanced border appears when hovering over the element

WP User Query and the wp-admin/admin-ajax function are both returning a value of 0, even with the

Encountering a 400 Bad Request Error with Salesforce LiveAgent Rest API

Is it possible to save the information entered before exiting the checkout page?

Is it possible to protect assets aside from JavaScript in Nodewebkit?

Retrieve the title and display it as a caption using JavaScript

Understanding the purpose of the notched property in Material-UI

Enhance your content with stylish text additions

Nav Dropdown Beyond Container Bounds

Implementing CSS and JavaScript files into the core of WordPress

My goal is to create collapsible and expandable rows within this table

Issue with Jquery .scroll method not triggering display:none functionality

Tips for eliminating dots from material icons CSS

.flex-grow-1 in react-bootstrap does not expand to fill vertical space within <Row>