Jump to content

Animated Gradient for Navigation Header

Recommended Posts

Site URL: https://cyan-blueberry-rbpp.squarespace.com

Hi Everyone,

I am trying to do some CSS Coding to have an animated background for the navigation header.

I have successfully figured out how to do it for the mobile nav:

++++++++++++++++++++++++++++++++++++++++++++++

// Animated Gradient Nav - Mobile //

.header-menu-nav, .header-menu .header-menu-bg {
  background: linear-gradient(-45deg, #FA77CE, #6395ce, #545aa8, #934f9f);
  background-size: 400% !important;
  -webkit-animation: Gradient 10s ease infinite !important;
  -moz-animation: Gradient 10s ease infinite !important;
  animation: Gradient 10s ease infinite !important;
}

++++++++++++++++++++++++++++++++++++++++++++++

HOWEVER... trying to achieve this for the desktop has been an issue. Here is the code I created thus far:

++++++++++++++++++++++++++++++++++++++++++++++

// Animated Gradient Nav - Desktop//

.header {
  background: linear-gradient(-45deg, #6395ce, #545aa8, #934f9f) !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;
}

++++++++++++++++++++++++++++++++++++++++++++++

I have spent hours trying to get the animated gradient background to work on desktop but I haven't figured out a solution.

Can anyone help me solve this?

Here is the website I'm working on:

https://cyan-blueberry-rbpp.squarespace.com/

Password is 123456

Many thanks!

-Brian-

Link to comment
  • Replies 3
  • Views 397
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Hi tuanphan:

I have tried header#header and no luck.  Here's what I have in CSS:

++++++++++++++++++++++++++++++++++++++

header#header {
  background: linear-gradient(-45deg, #6395ce, #545aa8, #934f9f) !important;
  background-size: 400% !important;
  -webkit-animation: Gradient 6s ease infinite !important;
  -moz-animation: Gradient 6s ease infinite !important;
  animation: Gradient 6s ease infinite !important;
}

+++++++++++++++++++++++++++++++++++++++

Is the way I have the code wrong?

Or, is it that I have the header set to "Solid" - do I need to have it set to something else?

Thanks in advance for your help!

-Brian-

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...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.