Transparent Headers in Wordpress with Elementor & OceanWP

Learn how to quickly create eye catching transparent Headers win Wordpress with OceanWP & Elementor with this weeks Design Tips tutorial.

Helping you create better looking websites, one tip at a time.

Free tutorials for Wordpress, Slider Revolution and Visual Composer. New tutorials added every Wednesday.

Take your Wordpress website and skills to the next level!

AFFILIATE DOWNLOADS
If you like what we do and would like to support us, please consider using these affiliate links when purchasing any of the plugins covered in our tutorials. Thank you for your support.

SUBSCRIBE

LETS CONNECT:

-~-~~-~~~-~~-~-
Speed Up Your Wordpress Website in 30 Seconds or Less!!
-~-~~-~~~-~~-~-

[WPTuts]

Learn how to build transparent navigation with Elementor & OceanWP in this weeks Design Tips video.

[Eli-hppy]

you jumped from creating a "Transparent" named page in Dashboard straight to inserting the FINISHED Transparent Header and Transparent Navigation in the Elementor editor, how do i do that....?

[barcode]

Hi! Your tutorials look nice but I just have a question about the Transparent Header No Grid template that you have. How did you do that? I was thinking that this tutorial was made for that purpose. I don't know if I missed any link tutorial for this. Thank you so much for answering this question.

[swatishirsath]

hi, i am using oceanwp and elementor. i have created a custom header with grey background and i have a slider on home page which i want to overlap with header a little bit so i have set z index of slider and that section to 1 . in elementor panel everything is looking exactly what i want but when i preview my page slider goes behind the header background(grey color). can u plz help me to get slider to the front??

[benoitleblanc]

Thanks, that gradient background overlay was exactly what I was looking for, thanks!!

[clodrichard]

Strange. The widget for navigation was not used in Elementor (elementor navigation or ocean navigation) ? Navigation is adeded automatically by OceanWP Estra Addon ?

[hydronicrocker]

can you add a sticky header with background that appears only when the header sticks on scroll. So its transparent to start with then on scroll has a background?

[nssdesigns]

Purchased Elementor Pro and OceanWP Pro way back following your tuts but went with Elegant Themes and DIVI lifetime. Still watching this makes me want to install it again and make some use of the purchase.

[jdoubla]

WP, can you explain what you did here? The tutorial jumps from opening the elementor template to just being integrated onto the new page. Seems to me that you just lowered the background color to be transparent and then used a negative top margin for the picture below to be placed behind the header??? Maybe I'm wrong but I've tried that method and it makes it really hard to edit the section below the header when the negative top margin goes above the screen area. I'm

[alperbudak]

Why can't I see the top menu at Elementor's page builder? Is there a way to see the transparent menu at Elementor when I design my web pages?

[ras]

I got lost at about the 3 minute point. Currently, I have a custom header that is not transparent and have yet to determine how to insert a background image beneath it. Once that is done, I can then make the header transparent.

[thecreatorrepo]

So @WPTuts how do you use a custom heaader and make it transparent? I can choose one or the other but not both options..

[ashkanahmadi]

I change the setting to Transparent but the page still shows below the menu. Why? How can I fix it? Thanks

[boomkings]

Thank you for a great explanation. I have done that but I have encounter a problem that one of my pages (abaou) after I have created content top menu bar is disapeared. Can anyone help me how to fix this issue?

[abiola]

Many thanks for the tutorials! Just purchased the E. Pro version using your affiliated link.

[Stefannnn]

hi i have a problem i have downloaded de zip but when i try to uploade it in wordpress it dosent work . what should i do ?

[suhaa]

Please do how to change font color with this theme. Mine is very absurd, I dont know which one is what for.

[rogeriolimas]

I want to use a slider in the header with the transparent sticky header on top of it.
How do I do that by using Elementor Pro?
Thanks!

[abr]

I have set my OceanWP header to transparent using the customizer. How is this different?

[thiagolisboapr]

Hey guys, thanks a lot for your tip!!! Loved a lot! What about the menu under the mobile version? It's not showing up! Do you have any clue?