Title: Transparent Top Bar
Last modified: August 29, 2018

---

# Transparent Top Bar

 *  Resolved [vsvpkev](https://wordpress.org/support/users/vsvpkev/)
 * (@vsvpkev)
 * [7 years, 10 months ago](https://wordpress.org/support/topic/transparent-top-bar/)
 * [http://www.revolvewheels.com](http://www.revolvewheels.com)
    Password: 000000
 * Hello, How do I make the top bar transparent?
    I am using the code, and it makes
   the top bar transparent however it makes the top bar go down into my header.
 * #top-bar {
    position: absolute; width: 100%; background-color: rgba(0, 0, 0, 
   0.5) !important; }
 * Anyone know a fix to just make the top bar transparent but without moving? Thanks
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Ftransparent-top-bar%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10638084)
 * Hello, do you still need help with this? Because on your site I see that you 
   have added a top bar directly on your custom header and it is transparent.
 *  Thread Starter [vsvpkev](https://wordpress.org/support/users/vsvpkev/)
 * (@vsvpkev)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10638205)
 * Hi [@oceanwp](https://wordpress.org/support/users/oceanwp/)
 * There was an issue where the top bar would not become transparent, so I just 
   made it into my header. However, I still would rather use a top bar so I can 
   set opacity difference for top bar and header.
 * Do you have CSS to make the top-bar transparent?
 * I tried
    #top-bar { width: 100%; background-color: transparent !important; }
 * But it didn’t work
 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 9 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10641585)
 * Hello, yes there is a code, can you add content in your top bar and add it exactly
   as you want, then tell me and I will give you the css code.
 *  [renjoy](https://wordpress.org/support/users/renjoy/)
 * (@renjoy)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10796213)
 * Hi, I’ve the same problem. I want to make the top bar transparent but i can’t.
   
   Can you write the code and give me instructions to enter it?
 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 8 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10799918)
 * Hello [@renjoy](https://wordpress.org/support/users/renjoy/), just create your
   top bar as you want and send me your site url, I will send you the code.
 *  [lauramark](https://wordpress.org/support/users/lauramark/)
 * (@lauramark)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10962039)
 * Hello [@oceanwp](https://wordpress.org/support/users/oceanwp/),
 * is possible to do this topbar transparent?
 * [https://elmusiconline.com/woo/](https://elmusiconline.com/woo/)
 * I want that the topbar bakcground can be the same that logo and menu.
 * Is it possible?
 * thank you
 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10963482)
 * Hello, try this css code:
 *     ```
       #top-bar-wrap {
           position: absolute;
           width: 100%;
           background-color: transparent;
       }
       #site-header.transparent-header {
           top: 41px;
       }
       ```
   
 *  [lauramark](https://wordpress.org/support/users/lauramark/)
 * (@lauramark)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10963603)
 * Yessss!!!! Thank you
 *  [lauramark](https://wordpress.org/support/users/lauramark/)
 * (@lauramark)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10964719)
 * [@oceanwp](https://wordpress.org/support/users/oceanwp/)
 * Sorry for disturb again.
 * If I check TopBar Sticky, it doesn´t work.
 * Do you know any solution?
 * [https://elmusiconline.com/woo/contacto/](https://elmusiconline.com/woo/contacto/)
 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10966453)
 * Hello, add this css code:
 *     ```
       #top-bar-wrap.top-bar-sticky {
           background-color: #fff !important;
       }
       ```
   
 *  [lauramark](https://wordpress.org/support/users/lauramark/)
 * (@lauramark)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10970444)
 * [@oceanwp](https://wordpress.org/support/users/oceanwp/) Why it doesn´t work?
 * Ii works 3 seconds
 * [https://atiendas.demoswp.com/contacto/](https://atiendas.demoswp.com/contacto/)
 * :_(
 *  Theme Author [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * (@oceanwp)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10981357)
 * Hi, add more content to your page and check, the top bar is fixed at the top 
   when you scroll.

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

The topic ‘Transparent Top Bar’ is closed to new replies.

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

 * 12 replies
 * 4 participants
 * Last reply from: [oceanwp](https://wordpress.org/support/users/oceanwp/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/transparent-top-bar/#post-10981357)
 * Status: resolved