Mobile nav menu

I am trying to figure out why one of my codes isn't working. It's the last few lines, which is supposed to make a gradient background in mobile nav menu. I know it's a lot of code. But, can someone look at it and tell me if anything is wrong? Thanks!

.image-block {
-webkit-filter: drop-shadow( 5px 5px 8px #000000 );
filter: drop-shadow( 20px 15px 10px #000000 );
}

// Announcement Bar Hover Color //

.sqs-announcement-bar { 
  width: 100%;
  background-color: #ff0000 !important; /* main color */
  webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}

.sqs-announcement-bar:hover {
  border-color: white !important;
  background-color: #6bae23 !important; /* hover color */
  webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
} 
// Bounce Social Icons //

@-webkit-keyframes hvr-pop {
    50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  }
  @keyframes hvr-pop {
    50% {
      -webkit-transform: scale(1.2);
      transform: scale(1.2);
    }
  }
  .sqs-block-socialaccountlinks-v2 a svg{
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
  }
  .sqs-block-socialaccountlinks-v2 a{
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
  }
  .sqs-block-socialaccountlinks-v2 a:hover{
    -webkit-animation-name: hvr-pop;
    animation-name: hvr-pop;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
  }
  .social-icons-style-regular .sqs-use--icon{
    fill: #000000 !important;
  }
  .social-icons-style-regular .sqs-svg-icon--wrapper:hover .sqs-use--icon{
    fill: #FECB2F !important;
  }
// Newsletter Block //

.newsletter-block {
  padding: 50px !important;
  border-radius: 25px;
  background-color: #272732;
}
// Gradient Newsletter Block // 

.newsletter-block {
  background: linear-gradient(to bottom, #c0c0c0, #000000);
  padding: 50px !important;
  border-radius: 20px;
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

// Animated Gradient Audio Player //

.sqs-widgets-audio-player {
  background-image: linear-gradient(-45deg, #ffffff, #ff0000, #000000, #F07C63) !important;
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
  border-radius: 5px;
}

// Highlighted Field Form // 

.field-list .field-element:focus, .field-element:visited{
    border-color: #FECB2F !important;
  }
  .field-list select:focus{
    outline-color:  #FECB2F !important;
  }
  .field-list .section{
    border-color: #FECB2F !important;
  }
  .form-button-wrapper .button{
    color: white !important;
    border-color: transparent;
    background-color: #fecb2f;
  }
  .form-button-wrapper .button:hover{
    color: white !important;
    background-color: #000000 !important;
  }
// Leaflet Contact Form Button //

.form-wrapper input[type=submit] {
  border-radius: 50px 0px 50px 0px !important;
  padding: 30px;
}
.form-wrapper .field-list .field .field-element{
  border:none;
  border-bottom: 3px solid;
  border-color: #ff0000;
  background: #ffffff  
}

// Animation Keyframes //

@-webkit-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes Gradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes Gradient { 
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

// Footer Top Border //

Footer {
  border-top: 5px solid #ff0000;
}

// Rotating Animation Keys //

@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
    5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
    20% { opacity: 0; -webkit-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-moz-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -moz-transform: translateY(-30px); }
    5% { opacity: 1; -moz-transform: translateY(0px);}
    17% { opacity: 1; -moz-transform: translateY(0px); }
    20% { opacity: 0; -moz-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-o-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -o-transform: translateY(-30px); }
    5% { opacity: 1; -o-transform: translateY(0px);}
    17% { opacity: 1; -o-transform: translateY(0px); }
    20% { opacity: 0; -o-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
    5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
    20% { opacity: 0; -ms-transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; transform: translateY(-30px); }
    5% { opacity: 1; transform: translateY(0px);}
    17% { opacity: 1; transform: translateY(0px); }
    20% { opacity: 0; transform: translateY(30px); }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@media only screen and (max-width: 640px) {   
h1 { font-size: 20px !important; }}
@media only screen and (max-width: 640px) {   
h2 { font-size: 20px !important; }}
@media only screen and (max-width: 640px) {   
h3 { font-size: 20px !important; }}
@media only screen and (max-width: 640px) {   
p { font-size: 11px !important; }}
//remove hyphens//
p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}
.sqs-search-page {
.sqs-post-type-image.ContentItem {
         display:none  !important;
    }
}
.image-slide-title {
white-space: normal !important;
line-height: 1.5em;
}
@media screen and (max-width: 640px){
.sqs-gallery-design-grid-slide{
width: 100% !important;
}
}
@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}
@media screen and (max-width: 960px) {
  h1 {
    font-size: 41px;
  }
  h2 {
    font-size: 33px;
  }
  h3 {
    font-size: 20px;
  }
}
/*Reducing font size for screens smaller than 960px*/
@media screen and (max-width: 960px) {
  h1 {
    font-size: 41px;
  }
  h2 {
    font-size: 33px;
  }
  h3 {
    font-size: 20px;
  }
}

/*Reducing font size for screens smaller than 640px*/
@media screen and (max-width: 640px) {
  h1 {
    font-size: 33px;
  }
  h2 {
    font-size: 20px;
  }
  h3 {
    font-size: 16px;
  }
}
// Bold Text Color //

h1 strong {
color: #32cd32;
font-weight: bold;
  }
// Custom Color Social Icons //

.sqs-use--icon {
  fill: #E77D6A !important;
}
// Slightly Angled Text //

h1
{
  transform: skewY(-5deg);
}
// Pill Audio Block //

.sqs-widgets-audio-player {
  border: 1px solid transparent;
  padding: 5px;
  border-radius: 50px;
}
.Header--top {
    background-image: url(https://static1.squarespace.com/static/5d4c573da7991a00018356bc/t/5dd5ef4cd168ef7c6a901a6b/1574301516774/Untitled+design.jpg);
    background-size: cover;
    background-position: center center;
}
// Center Footer Text //

@media only screen and (max-width:
  640px) {
    footer { text-align: center;}
}
@media screen and (max-width: 800px) {
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) {
    display: block!important;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper {
    width: 100%;
}
.sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child {
    width: 100%;
}
}
@media only screen and (max-width: 640px) 
{h1
{font-size: 70px;}}
@media screen and (max-width: 640px) 
{.Index-page-content h1
{font-size: 70px; }}
@media screen and (max-width: 640px) 
{h1 {
font-size: 70px;
letter-spacing: 5px;
line-height:60px;
color:white;}}
.site-title img {
   max-height: 100px;
   max-width: 400px;
 }
// Slide In Bounce Button - Left To Right //

.sqs-block-button-element--small:hover{
  color: #000000;
}

.sqs-block-button-element--small:hover:before, .sqs-block-button-element--small:focus:before, .sqs-block-button-element--small:active:before {
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}

.sqs-block-button-element--small:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #FECB2F;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.sqs-block-button-element--small {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.sqs-block-button-element--small {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// Mobile Menu Background //

.header-menu-bg {
background-color: #ffffff;
background: linear-gradient(to bottom, #6b8e23, #000000);
}

// Mobile Menu Text //

.header-menu-nav-item a {
  color: #FFFFFF !important;
}
// Mobile Menu Background //

.header-menu-bg {
background-color: #000000;
background: linear-gradient(to bottom, #F07C63, #E45372);
}

// Mobile Menu Text //

.header-menu-nav-item a {
  color: #FFFFFF !important;
}

Wrong. Mobile menu use different class, not .header-menu..

// Mobile Menu Background //

.header-menu-bg {
background-color: #ffffff;
background: linear-gradient(to bottom, #6b8e23, #000000);
}

// Mobile Menu Text //

.header-menu-nav-item a {
  color: #FFFFFF !important;
}
// Mobile Menu Background //

.header-menu-bg {
background-color: #000000;
background: linear-gradient(to bottom, #F07C63, #E45372);
}

// Mobile Menu Text //

.header-menu-nav-item a {
  color: #FFFFFF !important;
}

On 11/23/2019 at 12:57 AM, tuanphan said:

Wrong. Mobile menu use different class, not .header-menu..

// Mobile Menu Background //

.header-menu-bg {
background-color: #ffffff;
background: linear-gradient(to bottom, #6b8e23, #000000);
}

// Mobile Menu Text //

.header-menu-nav-item a {
  color: #FFFFFF !important;
}
// Mobile Menu Background //

.header-menu-bg {
background-color: #000000;
background: linear-gradient(to bottom, #F07C63, #E45372);
}

// Mobile Menu Text //

.header-menu-nav-item a {
  color: #FFFFFF !important;
}

Hello,

Do you happen to have a code for changing the social icon colour in Mobile Navigation Menu?

10 hours ago, LXK said:

Hello,

Do you happen to have a code for changing the social icon colour in Mobile Navigation Menu?

Can you share link to your site? 

3 hours ago, tuanphan said:

Can you share link to your site? 

Many thanks for your help.

It looks like I've found a way to make mobile nav social icons one colour and desktop another.

Please see below for anybody that needs it:

mobile.header-actions-action--social .icon--fill svg, .header--menu-open .icon--fill svg  {
  fill: #ffffff !important;
  }