Add a Dynamic RGB Shadow Effect to Your GeneratePress Theme Navigation Bar
If you’re a GeneratePress user looking to make your navigation bar stand out, this guide is for you! With this copyrighted CSS code, you can create an eye-catching animated RGB shadow below your header that enhances your website’s design. Let’s get started!
Why Add an Animated Shadow to Your Navigation Bar?
A dynamic shadow effect not only makes your header visually appealing but also creates a professional and modern look for your website. By using this simple CSS customization, you can:
- Add a splash of color to your navigation bar.
- Make your header more interactive and engaging.
- Improve the overall aesthetic of your WordPress site.
Step-by-Step Guide to Adding the Animated RGB Shadow
Follow these instructions carefully to implement the shadow effect in your GeneratePress theme.
The Code (Copyrighted by Digital Pritam)
Below is the CSS code you’ll need. This code is protected by copyright and is exclusive to Digital Pritam (www.digitalpritam.in). Do not reproduce or distribute without permission.
/* Copyright © Digital Pritam (www.digitalpritam.in) */
@keyframes rgbShadowAnimation {
0% {
box-shadow: 0 5px 15px 5px rgba(255, 0, 0, 0.25); /* Red */
}
33% {
box-shadow: 0 5px 15px 5px rgba(0, 255, 0, 0.25); /* Green */
}
66% {
box-shadow: 0 5px 15px 5px rgba(0, 0, 255, 0.25); /* Blue */
}
100% {
box-shadow: 0 5px 15px 5px rgba(255, 0, 0, 0.25); /* Red (back to start) */
}
}
.main-navigation:not(.slideout-navigation),
.sticky-enabled .main-navigation.is_stuck {
animation: rgbShadowAnimation 4s infinite; /* 4s animation that loops infinitely */
}
Where to Add This Code
- Log in to your WordPress dashboard.
- Navigate to Appearance > Customize > Additional CSS or go to your child theme’s
style.css
file. - Copy the CSS code above and paste it into the editor.
- Save your changes and refresh your website.
How It Works
- The
@keyframes
rule cycles through Red, Green, and Blue shadow colors. - The animation lasts 4 seconds and loops infinitely for a seamless effect.
- The shadow is applied to the navigation bar (
main-navigation
) and sticks when the header is sticky.
Tips for Customization
- Change the Animation Duration: Modify
4s
in theanimation
property to make it faster or slower. - Adjust Shadow Intensity: Change the
rgba()
values to customize shadow opacity. - Disable for Mobile: Use media queries to disable the animation on smaller screens for performance optimization.
Example:
@media (max-width: 768px) {
.main-navigation:not(.slideout-navigation),
.sticky-enabled .main-navigation.is_stuck {
animation: none;
box-shadow: none;
}
}
Copyright Notice
This CSS code and blog post are copyrighted by Digital Pritam (www.digitalpritam.in). Unauthorized use, reproduction, or distribution of the code is strictly prohibited. If you’d like to share or use this code, please credit the original author.
Conclusion
With just a few lines of CSS, you can significantly enhance your GeneratePress navigation bar with a beautiful animated RGB shadow effect. Try it today and give your WordPress website a fresh, modern look!
For more WordPress tips and tricks, visit Digital Pritam and follow us for updates on website design, blogging, and SEO.