425.830.8350

clients@briansniff.com

Web Design

Custom designed websites for business, personal, or eCommerce.

Website Hosting

Custom hosting solutions optimized for WordPress based sites on our Litespeed Server platform.

ECommerce

WooCommerce provides a powerful and scalable platform to sell both virtual and tangible goods. Contact us!

SEO

SEO practices include revamping of your site’s content, meta tags, and page structure to perform better in Google searches.

VIEW ALL SERVICES

Discussion – 

0

Discussion – 

0

Making Your Divi Header Transparent

Sometimes getting creative with your background or slider images can result in some cool effects for your header and menu area. This requires a little forward thinking, the right image(s) and the right color scheme to pull it off. Here’s how.

Divi allows you to modify the background color of your header area in the Appearance / Customize settings. However, it does not allow you to set any transparency which is needed in order to create the desired effect. Here’s an example from a site using Divi that utilizes this photo background / transparent menu look: www.graniteoffers.co.uk

Note the color of the menu items and the header background. It’s important to use the right color, light or dark, against the header background and image underneath. Otherwise your menu could look like a washout if the text is too dark, for example.

Here’s the code and explanation:

#main-header {
    opacity: 0.7;
}

Or, you could also include the color as well and completely ignore the Appearance / Customization settings. For example, like this:

background-color: rgba(1, 1, 60, 0.7)!important;

Due to the spacing defaults for the Divi sections you will most likely need to adjust the CSS for padding and margins for the background/slider image. In that example site they adjusted it as so using a custom class which you can assign to any Divi element in the page builder element’s dialog box:

.homepic {
margin-top: -145px;
padding-top: 115px;
}

This moves the background image up and under the header/menu area so the transparency effect really works. Under normal circumstances the section or slider starts below the header/menu which would not allow the image to be visible through the transparent header. So, you have to move it up!

 

Tags:

Site Manager

0 Comments

You May Also Like

Pin It on Pinterest

Share This