Create a transparent header with Dynamik and Beaver Builder

24th May 2016

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

Posted in ,

Please share this post:

Share on PinterestShare on LinkedIn

DWcircle

David Waumsley

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

2 Comments

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

    Hi,

    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 ?

    Thanks

    Reply
    • 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;
      }

      Reply

Leave a Comment