Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

John2141

Question

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;
}

Link to comment

4 answers to this question

Recommended Posts

  • 0

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;
}

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

Link to comment
  • 0
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
  }

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...