Modify the sticky menu color upon scrolling

Question

Modify the sticky menu color upon scrolling

While working on a client's website, I've stumbled upon an issue that has left me scratching my head.

I'm looking to modify the color of the sticky menu once it's scrolled. Can anyone assist me in creating a custom CSS code to implement these changes?

Here is the CSS snippet:

/*
Theme Name: Malory
Theme URI: http://www.tommusrhodus.com
Version: 1.0.3
Description: Malory - A Multipurpose, Responsive WordPress Theme.
Author: Tom Rhodes
Author URI: http://www.tommusrhodus.com
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: white, custom-background, threaded-comments, translation-ready, custom-menu
*/

/* 

WARNING! DO NOT EDIT THIS FILE!

To make it easy to update your theme, you should not edit the styles in this file. Instead use 
the custom.css file to add your styles. You can copy a style from this file and paste it in 
custom.css and it will override the style in this file. You have been warned! :)

*/
... (CSS styles continue)

css wordpress bootstrap-modal

Answer 1

Answer №1

To modify your theme's appearance, simply append the following code to the end of the stylesheet:

.navbar.fixed{
  background: rgba(255,255,255,0.6);
}

For optimizing the mobile display, you'll have to locate the suitable media query in the CSS file and insert the above code within that section.

Answer 2

To modify your theme's appearance, simply append the following code to the end of the stylesheet:

.navbar.fixed{
  background: rgba(255,255,255,0.6);
}

For optimizing the mobile display, you'll have to locate the suitable media query in the CSS file and insert the above code within that section.

Answer 3

Answer №2

This is just a demonstration to help understand the concept. Add a class to the header when it scrolls down.

All styling modifications for that class, like color changes, are specified in your CSS file, but you will require some basic JavaScript to track the scrolling. Take a look at this example (I have made some adjustments to the styling such as altering the height) and tailor it to suit your requirements

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 97) {
            $("header").addClass('shrink');
        } else {
            $("header").removeClass("shrink");
        }
    });
});

.container {
  height: 900px;
  overflow-y: scroll;
}

header {
  background-color: blue;
  width: 100%;
  height: 100px;
  position: fixed;
}

h1 {
  font-size: 22px;
  color: white;
}

header.shrink {
  height: 50px;
  background-color: red;
}

h1.shrink {
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container">
<header><h1>I'm a header</h1></header>
</body>

Answer 4

This is just a demonstration to help understand the concept. Add a class to the header when it scrolls down.

All styling modifications for that class, like color changes, are specified in your CSS file, but you will require some basic JavaScript to track the scrolling. Take a look at this example (I have made some adjustments to the styling such as altering the height) and tailor it to suit your requirements

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();
        if (scroll >= 97) {
            $("header").addClass('shrink');
        } else {
            $("header").removeClass("shrink");
        }
    });
});

.container {
  height: 900px;
  overflow-y: scroll;
}

header {
  background-color: blue;
  width: 100%;
  height: 100px;
  position: fixed;
}

h1 {
  font-size: 22px;
  color: white;
}

header.shrink {
  height: 50px;
  background-color: red;
}

h1.shrink {
  font-size: 14px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container">
<header><h1>I'm a header</h1></header>
</body>

Answer 5

Answer №3

In order for us to assist you effectively, it would be beneficial if you could share some of your code with us.

One way to approach this issue is by implementing a scroll listener using jQuery:

jQuery(window).scroll(function() {
if (jQuery(document).scrollTop() > 50) {
    jQuery('.navbar-nav').addClass('redColored');
} else {
    jQuery('.navbar-nav').removeClass('redColored');
}
});

Additionally, don't forget to include the necessary CSS styles:

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus {
    background:none;
}
.navbar-default .navbar-nav.redColored{
    background:#ff0000;
}

Answer 6

In order for us to assist you effectively, it would be beneficial if you could share some of your code with us.

One way to approach this issue is by implementing a scroll listener using jQuery:

jQuery(window).scroll(function() {
if (jQuery(document).scrollTop() > 50) {
    jQuery('.navbar-nav').addClass('redColored');
} else {
    jQuery('.navbar-nav').removeClass('redColored');
}
});

Additionally, don't forget to include the necessary CSS styles:

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:hover, 
.navbar-default .navbar-nav>.active>a:focus {
    background:none;
}
.navbar-default .navbar-nav.redColored{
    background:#ff0000;
}

Modify the sticky menu color upon scrolling

Answer №1

Answer №2

Answer №3

Similar questions

"Enhance Your Website Navigation with HTML5 and CSS - Creating a Wide

Header logo not showing up on webpage

Divs should be of consistent and adjustable height

Using jQuery to apply a CSS border to an image within a textarea

Jquery cascading menu

scrollable list using bootstrap

How can the 'Read more' feature be modified to impact multiple boxes? (Using jQuery, JS, and CSS)

Avoid the issue of a fixed position navigation bar overlapping with a sticky footer

Using AJAX in a loop iteration

Tips for displaying a sub-menu upon hovering

Using Bootstrap 5 to beautifully wrap an even quantity of boxes

Bootstrap Modal - Preselected Dropdown Option

Using jQuery to trigger a Bootstrap modal when a button is clicked

Flex wrap is causing additional space within the layout

Monochrome tabletop solid in one hue

Combine the content from multiple text areas and submit it to another text area

A step-by-step guide on adding a table with colored icons (red, green, and blue) to an HTML page using jQuery

CSS creates gaps between each of the internal elements inside the HTML document

Having issues with nth-child? It seems like nth-of-type isn't working either

Do not include posts from the current year in the query_post function of WordPress