Change color of sticky menu when scrolled - css

Question

Am editing a client's website and one thing has got my head spinning.
I would like to change the color of the sticky menu once it is scrolled. Can someone help me with a custom css to make those changes?
Here is my css
/*
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! :)
*/
/*-----------------------------------------------------------------------------------*/
/* Visual Composer Styles
/*-----------------------------------------------------------------------------------*/
.vc_column_container > .vc_column-inner {
padding-left: 0;
padding-right: 0;
}
.wpb_row {
margin-bottom: 0;
}
.box {
width: 100%;
}
div[data-vc-parallax] .box,
div[data-vc-parallax-image] .box {
background: none;
}
/*-----------------------------------------------------------------------------------*/
/* Theme Styles
/*-----------------------------------------------------------------------------------*/
.admin-bar .navbar.fixed,
.admin-bar .slide-nav-container header,
.admin-bar .lg-toolbar {
top: 32px;
}
p:empty {
display: none;
}
.feature {
padding-bottom: 25px;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background: none;
}
.social.bordered .goodshare:before {
display: none;
}
.social.bordered .goodshare {
padding: 0;
}
.single-portfolio.admin-bar .fotorama {
position: relative;
top: -32px;
}
.admin-bar .slide-nav-wrapper {
padding-top: 32px;
}
img {
max-width: 100%;
height: auto;
}
.tiles img {
max-width: none;
}
.select-wrap {
position: relative;
}
.select-wrap > span {
position: absolute;
right: 23px;
top: 7px;
pointer-events: none;
}
footer select {
border-color: #ccc;
}
footer address {
margin-bottom: 0;
}
/*-----------------------------------------------------------------------------------*/
/* WORDPRESS DEFAULT STYLES
/*-----------------------------------------------------------------------------------*/
.post-content ul, .post-content ol,
.wpb_text_column ul,
.wpb_text_column ol {
margin: 0 0 20px 0;
padding: 0;
list-style-position: inside;
}
.post-content ul ul, .post-content ol ol,
.wpb_text_column ul ul, .wpb_text_column ol ol {
margin: 0 0 0 40px;
}
.sticky {
}
.bypostauthor img.avatar {
}
.screen-reader-text {
}
select {
max-width: 100%;
}
.alignleft,
.aligncenter,
.alignright,
.alignnone {
margin-bottom: 25px;
}
.alignnone {
display: block;
}
.alignleft {
float: left;
margin: 0 30px 30px 0 !important;
}
.alignright {
float: right;
margin: 0 0 30px 30px !important;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
}
figure.aligncenter a {
display: inline-block;
overflow: hidden;
position: relative;
}
.wp-caption {
max-width: 100%;
text-align: center;
}
.wp-caption img {
margin-bottom: 10px;
}
.gallery-caption {
margin: 20px 0;
max-width: 100%;
text-align: center;
z-index: 999;
}
.wp-caption-text,
.gallery-caption-text {
margin: 6px 0;
font-style: italic;
font-size: 95%;
line-height: 120%;
}
.aligncenter {
text-align: center;
}
table#wp-calendar {
border: 1px solid #cccccc
}
table#wp-calendar>tbody>tr>td>a {
text-decoration: underline
}
table#wp-calendar thead>tr>th {
width: 35px;
height: 20px;
text-align: center;
border: 1px solid #cccccc;
}
table#wp-calendar tbody>tr>td {
width: 35px;
height: 20px;
text-align: center;
border: 1px solid #cccccc;
}
table#wp-calendar tfoot>tr>td>a,
tfoot>tr>td>a:link,
tfoot>tr>td>a:visited,
tfoot>tr>td>a:hover,
tfoot>tr>td>a:active {
text-decoration: underline;
height: 23px;
margin-left: 10px;
padding-bottom: 3px;
}
table#wp-calendar tfoot>tr>td#prev {
width: 58px;
height: 20px;
text-align: left;
}
table#wp-calendar tfoot>tr>td#next {
width: 58px;
height: 20px;
text-align: right;
}
.post-content table,
.wpb_text_column table {
margin-bottom: 25px;
}
.post-content table tr,
.post-content table td,
#wp-calendar table tr,
#wp-calendar table td,
.wpb_text_column tr,
.wpb_text_column td {
padding: 10px 15px;
border: 1px solid #cccccc;
}
dd {
margin-bottom: 25px;
}
dt {
margin-bottom: 10px;
font-size: 18px;
}
.widget_rss li {
margin-bottom: 20px; padding-bottom: 20px;
}
.widget_rss li .rsswidget, .widget_rss li cite {
font-weight: bold; display: block;
}
.widget_rss li .rss-date {
display: block; margin-bottom: 10px;
}
.widget_rss li cite {
margin-top: 10px;
}
.post-content hr,
.wpb_text_column hr {
clear: both;
}
.post-content span.pull-right,
.post-content span.pull-left,
.wpb_text_column span.pull-right,
.wpb_text_column span.pull-left {
float: right;
display: inline-block;
width: 300px;
margin: 0 0 20px 20px;
font-size: 22px;
line-height: 30px;
}
.post-content span.pull-right,
.wpb_text_column span.pull-right {
float: right;
margin: 0 0 20px 20px;
text-align: right;
}
.post-content span.pull-left,
.wpb_text_column span.pull-left {
float: left;
margin: 0 20px 20px 0;
}
.post-content table,
.wpb_text_column table {
text-align: left;
width: 100%;
}
.post-content table td,
.post-content table th,
.wpb_text_column table td,
.wpb_text_column table th {
padding: 15px;
}
.post-content table tr:nth-child(even),
.post-content table thead tr,
.wpb_text_column table thead tr,
.wpb_text_column table tr:nth-child(even) {
background: #f5f5f5;
}
/*-----------------------------------------------------------------------------------*/
/* CONTACT FORM 7
/*-----------------------------------------------------------------------------------*/
div.wpcf7 .wpcf7-not-valid {
border: 2px solid #b54d4d
}
span.wpcf7-not-valid-tip {
display: none !important
}
div.wpcf7-validation-errors,
.highlight {
margin: 0;
padding: 10px;
background-color: #fcf8e3;
color: #c09853;
border: 2px solid #faebcc;
}
div.wpcf7-validation-errors {
margin-top: 20px;
}
div.wpcf7-mail-sent-ok {
margin: 0;
padding: 10px;
border: 2px solid #d6e9c6;
background-color: #dff0d8;
color: #468847;
}
div.wpcf7 textarea {
height: 110px;
}
div.wpcf7 input[type="submit"],
div.wpcf7 p {
margin-bottom: 0;
}

Answer 1

just add this at the end of your themes stylesheet:
.navbar.fixed{
background: rgba(255,255,255,0.6);
}
regarding the mobile question you need to search for appropriate media query in the css and add the above to the according block.

Answer 2

This is a rough example but hopefully you get the concept. You can a class to the header once it has scrolled.
Any styling changes to that class like the color are defined in your css but you will need some simple JS to detect your scrolling. Please see this example (I took my own liberties with the styling like the height changing) and customize to your needs
$(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 3

You should provide us with some of your code to be able to help properly.. but in short
you need a scroll listener (if using jquery)
jQuery(window).scroll(function() {
if (jQuery(document).scrollTop() > 50) {
jQuery('.navbar-nav').addClass('redColored');
} else {
jQuery('.navbar-nav').removeClass('redColored');
}
});
and the CSS
.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;
}