Create a transparent header with Dynamik and Beaver Builder

5.30 minute video tutorial on how make header content with the Dynamik Website Builder them lay over a background image created with Beaver Builder Plugin.

CSS used in this video:

/*Adjust according to the header height and margins in the Dynamik headers options.
Remove .home if needed site-wide */

 .home .site-inner {
     margin-top: -140px; 

/* Add this if needing to show the image logo */ 
.header-image .title-area, .header-image .site-title, .header-image .site-title A {
     position: relative; 
     z-index: 1;

The CSS editor I use in the video is Stylizer 6


I build websites at WP Corner Shop and travel. I also co-host a weekly WordPress podcast called WP Builds and make YouTube videos.


  1. Laurent Laurent on 26th April 2017 at 10:21 am


    Thanks for your post, that helped me a lot. However sub-menus are hidden / not completly visible and I can’t find how to correct that ?

    Could you help ?


    • David Waumsley David Waumsley on 26th April 2017 at 10:58 am

      Hi Laurent

      Ah, I am not sure as I have nothing to test it on. Have you got a URL I could see. You could try this

      .menu-primary A
      z-index: 1 !important;

Leave a Comment