BriGuy Posted July 17, 2022 Share Posted July 17, 2022 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
tuanphan Posted July 18, 2022 Share Posted July 18, 2022 SS 7.1. header use this ID Quote header#header Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
BriGuy Posted July 18, 2022 Author Share Posted July 18, 2022 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
tuanphan Posted July 19, 2022 Share Posted July 19, 2022 Can you check password? 123456 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment