Title: Transparent navigation while scrolling
Last modified: April 20, 2019

---

# Transparent navigation while scrolling

 *  Resolved [marko1995](https://wordpress.org/support/users/marko1995/)
 * (@marko1995)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/)
 * Hello,
 * I would like to have transparent navigation background and topbar background 
   while scrolling.
 * How to do this?
 * Regards
    -  This topic was modified 7 years ago by [marko1995](https://wordpress.org/support/users/marko1995/).
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftransparent-navigation-while-scrolling%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 11 replies - 1 through 11 (of 11 total)

 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11454818)
 * Hey,
    This css should work for you:
 *     ```
       #kad-banner-sticky-wrapper {
    
       background: rgb(55,55,55) !important
;
       }

       .is-sticky .headerclass {
    
       background: rgba(55,55,55, 0.8 ) !important;

       }

       .is-sticky  #kad-shrinkheader {
    
       background:transparent !important;
       
}

       ```
   
 * Just paste that into your custom css box in Theme Options > Advanced Settings.
 * Also, you are using a really old version of the theme. I highly recommend updating.
   You can download the latest version from here: [https://www.kadencethemes.com/my-account/](https://www.kadencethemes.com/my-account/)
 * Hannah
 *  Thread Starter [marko1995](https://wordpress.org/support/users/marko1995/)
 * (@marko1995)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11454854)
 * I added code you’ve sent but still same, its not transparent while scrolling…
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11454894)
 * I’m not seeing the css in your code. Where are you adding it?
 * Hannah
 *  Thread Starter [marko1995](https://wordpress.org/support/users/marko1995/)
 * (@marko1995)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11454919)
 * Theme Options -> Advanced Settings -> Custom css box
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11454962)
 * Have you cleared your cache after adding it? What all have you added to your 
   custom css?
 * Hannah
 *  Thread Starter [marko1995](https://wordpress.org/support/users/marko1995/)
 * (@marko1995)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11454983)
 * Please check pics I uploaded below:
 * [https://ibb.co/fXJ21kQ](https://ibb.co/fXJ21kQ)
    [https://ibb.co/Fx9TFQ2](https://ibb.co/Fx9TFQ2)
   [https://ibb.co/nBZg0PZ](https://ibb.co/nBZg0PZ)
    -  This reply was modified 7 years ago by [marko1995](https://wordpress.org/support/users/marko1995/).
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11455059)
 * I think the css I posted previously had some weird spacing that may or may not
   be conflicting. Try adding this instead, and be sure to clear your cache after
   adding it:
 *     ```
       #kad-banner-sticky-wrapper { 
       background: rgb(55,55,55) !important;
       }
       .is-sticky .headerclass {
       background: rgba(55,55,55, 0.8 ) !important;
       }
       .is-sticky  #kad-shrinkheader {
       background:transparent !important;
       }
       ```
   
 * Let me know if that works!
 * Hannah
 *  Thread Starter [marko1995](https://wordpress.org/support/users/marko1995/)
 * (@marko1995)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11455072)
 * Thank You Hannah, it works perfect now. What about topbar? Can topbar be transparent
   too while navigating? (Red topbar)?
 * Regards
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11455099)
 * Try adding this:
 *     ```
       .is-sticky section#topbar {
           background: rgba(300,0,5, 0.9);
       }
       ```
   
 * Hannah
 *  Thread Starter [marko1995](https://wordpress.org/support/users/marko1995/)
 * (@marko1995)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11455114)
 * Works perfect. Thanks – Regards
 *  [hannah](https://wordpress.org/support/users/hannahritner/)
 * (@hannahritner)
 * [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11455115)
 * Glad to hear it. Happy to help!
 * Hannah

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Transparent navigation while scrolling’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/virtue/3.4.14/screenshot.png)
 * Virtue
 * [Support Threads](https://wordpress.org/support/theme/virtue/)
 * [Active Topics](https://wordpress.org/support/theme/virtue/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/virtue/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/virtue/reviews/)

 * 11 replies
 * 2 participants
 * Last reply from: [hannah](https://wordpress.org/support/users/hannahritner/)
 * Last activity: [7 years ago](https://wordpress.org/support/topic/transparent-navigation-while-scrolling/#post-11455115)
 * Status: resolved